Zdarzenie onChange dla elementu potomnego Reaguj na aktualizację stanu

Question

Próbuję nauczyć się, jak zaimplementować formularz odpowiedzi (składnia ES6) i przekazać zdarzenia onChange dla każdego pola do komponentu nadrzędnego kontrolera, który jest odpowiedzialny za aktualizację stanu. Działa to dobrze dla standardowych elementów html, jednak próbuję preinstalowanego Datepicker (https://www.npmjs.com/package/react-bootstrap-date-picker) dla pola daty i nie można łatwo przekazać zdarzenia z powrotem do rodzica w ten sam sposób. Czy istnieje prosty sposób rozwiązania tego problemu?

Controller Komponent

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)} /> 
    } 
} 

Komponent Dziecko

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

onChange obsługi dla DatePicker nie jest wywoływana za pomocą standardowej przeglądarki change imprezy, ale z value i formattedValue jako argumenty. Polecam się rejestrować różne onChange teleskopowe w komponentu Child które przekształcają zdarzenie polu wprowadzania odpowiednich za:

Controller Komponent

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)} /> 
    } 
} 

komponent dziecko

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> 
    } 
}