React - setting input value using JavaScript does not call 'onChange'

Question

In my React application (version 15.4.2), I update the value of the input text field using JavaScript - however, I have an event listener onChangeassociated with the input field, and changing the input value does not start the handler (of course, good old-fashioned text input in the input field ), although the contents of the field are updated correctly.

constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
}

onChange(event){
    let attribute = event.target.name;
    let updatedGroup = this.state.group;
    updatedGroup[attribute] = event.target.value;
    this.setState({group: updatedGroup});
}

addMember(memberId) {
    let inputField = document.getElementById("members");
    let inputValues = inputField.value.split(",");
    inputField.value = [...inputValues, memberId];
}

render(){
    <input type="text" id="members" name="members" value={this.state.group.members} onChange={this.onChange} />
}

So, when called addMember()(clicking a button in a child component), the contents of the input field itself are correctly updated, but onChange is not called, and therefore, the state is not updated, etc.

Is there a way that I can programmatically set the value of an input field and call onChange?

Answer 1

Onchange -, document.getElementById , DOM, Onchange . , , DOM.

, addMember DOM state.

addMember:

addMember(memberId) {
    //let inputField = document.getElementById("members");
    //let inputValues = inputField.value.split(",");
    //inputField.value = [...inputValues, memberId];

    let group = this.state.group.slice();
    group[members] = group[members] + ',' + memberId;
    this.setState({
        group
    });
}

Answer 2

, , - onChange - , ( ) . - . , -, .

" , onChange?" onChange - , ?