子要素の状態をリセットするにはどうすればよいですか？

Question

私は、クリックしたときに増分するカウンターを状態で保持する3つの要素を持っているとしましょう。

1つの要素をクリックすると、他のカウンタを0にリセットするにはどうすればよいですか？あなたのChildコンポーネントが自分の状態を管理しているので、少し難しいだろう

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

。

ダムコンポーネントに変換し、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