反应-使用JavaScript设置输入值不会触发'onChange'

Question

在我的React应用程序（版本15.4.2）中，我正在使用JavaScript更新文本输入字段的值-但是，我有一个onChange与输入字段相关联的事件监听器，并且更改输入字段的值不会触发处理程序（当然，可以在输入字段中进行老式输入），尽管该字段的内容已正确更新。

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

因此，当addMember()被调用时（通过在子组件中单击按钮），输入字段本身的内容会正确更新，但是不会调用onChange并因此不会更新状态，等等。

有没有办法以编程方式设置输入字段的值并触发onChange？

Answer 1

Onchange方法只有在你输入内容时才会被触发，如果你使用document.getElementById并替换它的值，它将直接替换 DOM 中的值，onChange在这种情况下不会被触发。由于您使用的是 React，我认为您应该避免直接 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
    });
}