在reactjs中访问onChange字段时输入字段目标为空

Question

即使我为名称和值字段分配值，event.target 也会变为空。event.target.value 正在获得价值，但没有获得任何其他价值。

    <input type= "text" 
       name= {value}
       value = {currentValue}
       onChange = { (e) => this.onInputChanged(e) } 
       disabled = { disabled }
    />

    onInputChanged = async (e) => {
       await this.setState({ currentValue: e.target.value })
       console.log('event', e.target);    //This is showing null
       this.props.onInputChange(e);
    }

Answer 1

React 重用合成事件对象，因此您不能按原样在异步上下文中使用它。

来自文档：

是SyntheticEvent汇集起来的。这意味着在调用事件回调后，SyntheticEvent该 对象将被重用，并且所有属性将被取消。这是出于性能原因。因此，您无法以异步方式访问该事件。

笔记：

如果要以异步方式访问事件属性，则应该调用event.persist()该事件，这将从池中删除合成事件，并允许用户代码保留对事件的引用。

您需要同步提取信息，或者event.persist()在异步上下文中使用对象之前调用以持久化该对象。

同步提取值：

onInputChanged = event => {
   const value = event.target.value;
   (async () => {
       await this.setState({ currentValue: value });
       this.props.onInputChange(e);
   })();           
}

在异步上下文中使用事件之前保留该事件：

onInputChanged = event => {
   event.persist();
   (async () => {
       await this.setState({ currentValue: e.target.value });
       console.log('event', e.target);
       this.props.onInputChange(e);
   })();           
}