setState operates asynchronously. You can't get state's finger right away. You can use callback to get
this.setState ({value: event.target.value}, () = > console.log (this.state.value))

setState does not immediately refresh the state tree, it also merges the old and new states and scans the virtual DOM tree to find the affected nodes (such as value=this.state.value ) and then updates the UI section on the node, which is very time-consuming (relatively speaking), so it will wait for an opportunity to do batch updates, until then state will not be changed.

deeply study the working mechanism of React setState-DanceOnBeat-blog Park

as for why you bind value to state , because react has bi-directional binding , which opens Model and View , you no longer have to listen to whether a variable changes and then make changes on the interface.

setState () is an asynchronous operation. When the following console.log () executes, state has not been updated, so the output is the previous value.

setState, as an asynchronous operation, supports callback.

this.setState({value: event.target.value}, () => console.log(this.state.value))

there is no problem with this. The state you finally submitted must be the same as the one you typed