Javascript 在reactjs的onChange字段中访问时,输入字段目标为空
即使我给name和value字段赋值,event.target也会变为null。 event.target.value正在获取值,但未获取任何其他值Javascript 在reactjs的onChange字段中访问时,输入字段目标为空,javascript,html,reactjs,Javascript,Html,Reactjs,即使我给name和value字段赋值,event.target也会变为null。 event.target.value正在获取值,但未获取任何其他值 <input type= "text" name= {value} value = {currentValue} onChange = { (e) => this.onInputChanged(e) } disabled = { disabled } />
<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);
}
this.onInputChanged(e)}
disabled={disabled}
/>
onInputChanged=异步(e)=>{
等待此.setState({currentValue:e.target.value})
console.log('event',e.target);//这显示为null
此.props.onInputChange(e);
}
React重用合成事件对象,因此不能在异步上下文中使用它
从:
事件
已合并。这意味着事件
对象将被重用,所有属性将在
已调用事件回调。这是出于性能原因。作为
因此,您不能以异步方式访问事件
注意:
如果希望以异步方式访问事件属性,则
应该对事件调用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);
})();
}
您需要发布一些代码您需要设置值以获得值共享一些您正在挣扎的代码库
this。setState
返回未定义的,因此等待
仅在您赢得比赛条件时才起作用。