返信子コンポーネントの状態を更新するonChangeイベント

Question

Reactフォーム（ES6構文）を実装し、各フィールドのonChangeイベントを状態の更新を担当するコントローラの親コンポーネントに渡す方法を学習しようとしています。これは、標準のhtml要素ではうまく動作しますが、日付フィールドにはあらかじめ缶詰めされたDatepicker（https://www.npmjs.com/package/react-bootstrap-date-picker）を試していますが、同じ方法で親にイベントを簡単に戻すことはできません。これに対処する簡単な方法はありますか？

コントローラコンポーネント

class Parent extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = {job: ''} 
    } 

    setJobState(event) { 
     var field = event.target.name; 
     var value = event.target.value; 
     this.state.job[field] = value; 
     this.setState({job: this.state.job}); 
    } 


    render() { 
     return <Child onChange={this.setJobState.bind(this)} /> 
    } 
} 

子コンポーネント

class Child extends React.Component { 
    constructor (props) { 
     super(props); 

    } 

    render() { 
     <form> 
     <input type="text" name="jobNumber" onChange={this.props.onChange} /> 
     <DatePicker name="dateCmmenced" onChange={this.props.onChange} /> 
     </form> 
    } 
} 

Answer 1

DatePickerためonChangeハンドラはなく、引数としてvalueとformattedValueと、標準的なブラウザchangeイベントで呼び出されていません。私は、それぞれの入力フィールドのイベントを変換し、あなたのChildコンポーネントに異なるonChangeハンドラを登録することをお勧めします：

コントローラコンポーネント

class Parent extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = {} 
    } 

    onChange(field, value) { 
     // parent class change handler is always called with field name and value 
     this.setState({[field]: value}); 
    } 


    render() { 
     return <Child onChange={this.onChange.bind(this)} /> 
    } 
} 

あなたがいるような子コンポーネント

class Child extends React.Component { 
    constructor (props) { 
     super(props); 
    } 

    onFieldChange(event) { 
     // for a regular input field, read field name and value from the event 
     const fieldName = event.target.name; 
     const fieldValue = event.target.value; 
     this.props.onChange(fieldName, fieldValue); 
    } 

    onDateChange(dateValue) { 
     // for a date field, the value is passed into the change handler 
     this.props.onChange('dateCommenced', dateValue); 
    } 

    render() { 
     return <form> 
      <input type="text" name="jobNumber" onChange={this.onFieldChange.bind(this)} /> 
      <DatePicker onChange={this.onDateChange.bind(this)} /> 
     </form> 
    } 
}