event.target.value 在更改前给出值

Question

当我尝试使用 onchange 更改输入字段的状态时 e.target.value 给出更改前的值

 <form onSubmit={this.handleSubmit}>
      <input type='text'value={this.state.search} onChange={this.onChange}/>
      <button type='submit' >Search</button>
 </form>

onchange 函数如下所示

onChange=(e)=>{ var search=e.target.value;
    this.setState({search})
    this.props.dispatch({type:'SUGG',payload:this.state.search,})
}

我尝试同时记录 e.target.value 和 this.state.search e.target.value 显示正确值但状态显示先前值

编辑：我知道 setstate 是异步函数，因此会记录先前的值

Answer 1

尝试从 setState 的回调中调度：

this.setState({search}, ()=>{
       this.props.dispatch({type:'SUGG',payload:this.state.search,})
});

由于 setState 的异步特性，它会先更新状态然后执行回调。

Answer 2

@Jai 的答案将起作用，但假设您在调用 this.setState 后没有其他可能修改 this.state.search 的操作，您可以调用 dispatch直接传入search

例如：

payload:search

完整的：

onChange=(e)=>{ var search=e.target.value;
    this.setState({search})
    this.props.dispatch({type:'SUGG',payload:search,})
}

问题是 setState 是异步的。调用它不会立即更改 this.state，因此您可以直接使用 search 或在 setState.

中使用回调

event.target.value 在更改前给出值

event.target.value is giving value before change

javascript

events

event-handling

reactjs