如何重置子元素的狀態？

Question

比方說，我有三個元素可以保持點擊時增加的計數器。

如果我點擊一個元素，我該如何重置其他計數器爲0？

https://jsfiddle.net/69z2wepo/56827

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') 
); 

Answer 1

因爲你的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

Answer 2

組件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