Reagieren: programmgesteuert Änderung Komponentenwert löst kein onChange-Ereignis

Question

Ich habe ein Auswahlfeld innerhalb einer React-Komponente, Wert es wird über den Komponentenstatus gesetzt und hat eine Funktion an das OnChange-Ereignis. Wenn ich den Auswahlfeldwert manuell ändere, wird das onChange-Ereignis ausgelöst, aber wenn ich es durch Ändern des Statuswerts von einer anderen Funktion ändere, ist dies nicht der Fall. Gibt es eine Möglichkeit, das Ereignis programmgesteuert auszulösen?

Edit:

Unten ist ein einfaches Beispiel, was ich erreichen müssen. Die Idee ist, dass, wenn das handleChange1() den Wert von state.val2 ändert (und daher die im zweiten select Feld ausgewählte Option ändert), das handleChange2() ebenfalls ausgelöst wird, so dass das synthetische Ereignis an die Elternfunktion übergeben wird Code sind die Auswahlfelder weitere Komponenten):

class Component extends React.Component { 
    state = { 
    val1: 1, 
    val2: 1, 
    } 

    handleChange1 = (event) => { 
    const val2 = event.target.value === 3 ? 1 : null; 
    this.setState({ 
     val1: event.target.value, 
    }); 
    if (event.target.value === 3) { 
     this.setState({ 
     val2: 1, 
     }); 
    } 
    this.props.parentFunction(event); 
    } 

    handleChange2 = (event) => { 
    this.setState({ 
     val2: event.target.value, 
    }); 
    this.props.parentFunction(event); 
    } 

    render() { 
    return (
     <div> 
      <select value={val1} onChange={this.handleChange1}> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      </select> 
      <select value={val2} onChange={this.handleChange2}> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      </select> 
     </div> 
    ); 
    } 
}; 

Answer 1

Sie sollten Ihre Eingabe in einem speziellen Komponente wickeln Sie das gewünschte Verhalten anpassen. Etwas wie:

class Input extends React.Component { 

constructor(props){ 
    super(props); 
    this.state = { 
     value: props.value 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     value: nextProps.value, 
    }); 
    this.props.onChange(nextProps.value); 
    } 

    updateValue(ev) { 
    this.setState({ 
     value: ev.target.value, 
    }); 
    this.props.onChange(ev.target.value); 
    } 

    render() { 
    return (
     <input 
     onChange={this.updateValue.bind(this)} 
     value={this.state.value} 
     {...this.props} 
     /> 
    ) 
    } 
} 

und verwenden Sie es mögen:

<Input value="test" onChange={someAction} /> 

beachten Sie, dass, weil Sie Ihre Eingabe in einem kontrollierten Zustand ist, den Wert nie null noch nicht definiert sein muss.