IT技术 - React - 使用 JavaScript 设置输入值不会触发“onChange” - 吾爱随笔录

React - 使用 JavaScript 设置输入值不会触发“onChange”

IT技术 javascript reactjs

2021-05-17 11:23:27

在我的 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？

2个回答

在这种情况下，我总是让您的onChange事件处理程序成为一个将事件数据（输入的字符或聚合字符串）传递给另一个函数的函数。我把所有的业务逻辑都放在那个函数中。这样，如果我想调用业务逻辑，我只需调用该方法。

由于您问“有没有办法以编程方式设置输入字段的值并触发onChange？” 为什么不onChange从以编程方式设置值的函数中跳过并调用业务逻辑函数？

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

其它你可能感兴趣的问题

上一篇如何在另一个react组件中关闭语义 ui 模式？下一篇内存不足应用程序崩溃 React Native