如何重置子元素的状态？

问题描述：

比方说，我有三个元素可以保持点击时增加的计数器。如何重置子元素的状态？

如果我点击一个元素，我该如何重置其他计数器为0？

const Parent = React.createClass({ 
    render() { 
     const rows = []; 
     for (let i = 0; i < 3; i++) { 
      rows.push(<Child key={i} />); 
     } 
     return (
      <ul> 
       {rows} 
      </ul> 
     ); 
    } 
}); 

const Child = React.createClass({ 
    getInitialState() { 
     return {counter: 0}; 
    }, 
    handleClick() { 
     this.setState({counter: ++this.state.counter }); 
    }, 
    render() { 
     return (
      <div onClick={this.handleClick}> 
       {this.state.counter} 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Parent />, 
    document.getElementById('app') 
);

答

因为你的Child组件管理自己的状态，这将是一个有点硬。

您可以将它们转换为哑元组件，并在您的Parent组件中管理它们的状态。

像这样的事情

const Parent = React.createClass({ 
    getInitialState() { 
     return {counters: [0,0,0]}; 
    }, 
    handleClick(index){ 
     let newCounterState = this.state.counters.map(() => 0); 
     newCounterState[index] = this.state.counters[index] + 1 ; 
     this.setState({counters : newCounterState}) 
    }, 
    render() { 
     const rows = this.state.counters.map((value,index) => (
      <Child 
       key={index} 
       handleClick={() => this.handleClick(index)} 
       counter={value} 
      /> 
     )) 
     return (
      <ul> 
       {rows} 
      </ul> 
     ); 
    } 
}); 

const Child = ({counter,handleClick}) => (
    <div onClick={handleClick}> 
     {counter} 
    </div> 
) 

ReactDOM.render(
    <Parent />, 
    document.getElementById('app') 
);

jsfiddle

newCounterState [索引] = this.state.counters [指数] + 1，这是反模式 - 不应该改变状态，比使用的setState其他。 –

不会改变'state'，它只是使用'state'来返回一个新的值... – QoP

你是对的，我的错误。 –

答

组件parent在这种情况下，应管理的children状态。

检查：

const Parent = React.createClass({ 
    getInitialState() { 
     return {counter: 0, id: 0}; 
    }, 
    handleClick(id) { 
     if(this.state.id == id){ 
      this.setState({counter: ++this.state.counter, id: id }); 
     } else { 
      this.setState({counter: 1, id: id }); 
     } 

    }, 
    getCounter(id){ 
     if(id == this.state.id){ 
      return this.state.counter; 
     } else { 
      return 0; 
     } 
    }, 
    render() { 
     const rows = []; 
     for (let i = 0; i < 3; i++) { 
      rows.push(<Child key={i} counter={this.getCounter(i)} handleClick={this.handleClick} id={i} />); 
     } 
     return (
      <ul> 
       {rows} 
      </ul> 
     ); 
    } 
}); 

const Child = React.createClass({ 

    render() { 
     return (
      <div onClick={this.props.handleClick.bind(null, this.props.id)}> 
       {this.props.counter} 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Parent />, 
    document.getElementById('app') 
);

JsFiddle

如何重置子元素的状态？

相关推荐