onChange-Ereignis für reagierende untergeordnete Komponente, Status zu aktualisieren

Question

Ich versuche zu lernen, wie ein React-Formular (ES6-Syntax) implementieren und übergeben Sie die OnChange-Ereignisse für jedes Feld bis zu einer Controller-übergeordneten Komponente, die für die Aktualisierung des Status verantwortlich ist. Dies funktioniert gut für Standard-HTML-Elemente, jedoch versuche ich einen vordefinierten Datepicker (https://www.npmjs.com/package/react-bootstrap-date-picker) für ein Datumsfeld und kann das Ereignis nicht einfach auf die gleiche Weise an den Eltern übergeben. Gibt es eine einfache Möglichkeit, dies zu beheben?

Controller Komponenten

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

Kinder Komponente

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

Der onChange Handler für die DatePicker nicht mit einem Standard-Browser change Ereignisse aufgerufen, aber mit value und formattedValue als Argumente. Ich würde empfehlen, verschiedene onChange Handler in Ihrer Child Komponente zu registrieren, dass das jeweilige Eingabefeld Veranstaltung verwandeln:

Controller Komponenten

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

Kinder Komponente

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