javascript - React - 使用 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 事件处理程序成为一个将事件数据(输入的字符或聚合字符串)传递给另一个函数的函数。我将所有业务逻辑放在那个 函数中。这样，如果我想调用业务逻辑，我只需调用该方法即可。

既然您在问“有没有一种方法可以让我以编程方式设置输入字段的值并触发 onChange？”为什么不跳过 onChange 并从以编程方式设置值的函数中调用业务逻辑函数？