Reactの特定のコンポーネントの状態を設定する

Question

同じコンポーネントを多くのページで1つのページにレンダリングすることができます。ユーザーは同じ子コンポーネントを複数追加できます。子コンポーネントのフォーム要素内の日付を選択するときは、選択した子コンポーネントの日付のみを変更する必要があります。現時点では、画面上のすべての子コンポーネントの日付が変更されます。どこに間違っているのか誰にでも見られますか？

class ParentFixturesComponent extends Component { 

    constructor() { 
     super(); 
     this.state = { 
      numChildren: 0, 
      startDate: moment(), 
      id: uuid() 
     }; 
    } 

    changeDate(newDate) { 
     this.setState({ 
      startDate: newDate 
     }); 
    } 

    onAddMatch() { 
     this.setState({ 
      numChildren: this.state.numChildren + 1 
     }); 
    } 

    render() { 
     const children = []; 
     for (let i = 0; i < this.state.numChildren; i += 1) { 
      children.push(<SingleMatchForm startDate={this.state.startDate} 
              key={this.state.id} 
              changeDate={this.changeDate.bind(this)} 
      />) 
     } 

     return (
      <Fixtures addMatch={this.onAddMatch.bind(this)}> 
       {children} 
      </Fixtures> 
     ); 
    } 

} 

export default ParentFixturesComponent; 

子コンポーネント

class SingleMatchForm extends Component { 

    handleChange(params) { 
     this.props.changeDate(params); 
    } 

    render() { 
     return (
      <div className="row"> 
       <div key={this.props.id} className="form-group"> 
        <label className="control-label col-md-2">New Match</label> 
        <div className="col-md-6"> 
         <DatePicker 
          selected={this.props.startDate} 
          onChange={this.handleChange.bind(this)}/> 
         <div className="section-divider mb40" id="spy1"> </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

} 

export default SingleMatchForm; 

Answer 1

理由は、あなたがその単一state値を更新した場合、それはすべてのコンポーネントに影響を与えるだろう、すべての子コンポーネントの日付の値を保存するために、単一のstate変数を使用しています。この問題を解決するには、単一値の代わりにarrayを使用します。

this.state = { 
    numChildren: 0, 
    startDate: [], //array 
    id: uuid() 
}; 

今各子コンポーネントに対して、このarrayの各値を使用して、このような特定の値、更新するためのonChangeメソッドでインデックスをバインドします：

children.push(<SingleMatchForm startDate={this.state.startDate[i] || moment()} 
              key={this.state.id} 
              changeDate={this.changeDate.bind(this, i)} 
      />) 

そして内部をこのよう

onChangeメソッドは特定の値をすべて更新するわけではありません。

changeDate(i, newDate) { 
    let startDate = this.state.startDate.slice(); 
    startDate[i] = newDate; 
    this.setState({ 
     startDate 
    }); 
} 

Answer 2

私は、選択した子コンポーネントの日付を変更したいだけです。

子コンポーネントは、状態としてdateを保持するか、すべての子コンポーネントの配列の日付を親に保持する必要があります。