选择不工作的 onChange 处理程序 - ReactJS

Question

我有以下代码，我试图更新选择标签的值。

  constructor(props){
    super(props)
    this.state={value: 'Male'}
  }

  handleChange = (event) => {
    this.setState({value: event.target.value})
    this.props.selectCB(this.state.value) 
    console.log(this.state.value)
  }
  render(){
    return (
      <label>GENDER: <br/>
        <select value={this.state.value} onChange={this.handleChange}>
          <option value='Male'>Male</option>
          <option value='Female'>Female</option>
          <option value='Not Specified'>Not-Specified</option>
          <option value='Non Binary'>Non-Binary</option>
        </select>
        <br/>
      </label>
    )
  }

}
class NameForm extends React.Component{
  constructor(props){
    super(props)
    this.state = {selectValue: ''}
  }

  handleSelectCallback = (selectData) => {
    this.setState({selectValue: selectData})
  }
  handleSubmit = (event) => {
    console.log('Logged select: ' + this.state.selectValue)
    alert(`Submitted : ${this.state.selectValue}`)
    event.preventDefault()
  }

  render(){
    return <form onSubmit={this.handleSubmit}>
        <SelectTag selectCB={this.handleSelectCallback}/>
        <input type='submit' value='Submit'></input>
    </form>
  }
}



function App(){
  return <NameForm/>
}
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(App());

SelectTag 是 NameForm 的子组件，而 NameForm 又由函数 App() 呈现。 更改处理程序位于 SelectTag 中，而提交处理程序位于 NameForm 中。 我正在尝试通过使用回调句柄选择回调（）将选定值从 SelectTag 获取到父 NameForm。 当 SelectTag 中的数据发生更改时，它不会在 NameForm 中更新。

如果我从值 Male 开始并将其更改为 Female，NameTag 中 selectValue 的值仍然是 Male。 如果我再次更改该值（例如未指定），则 selectValue 的值将更改为女性。

（注意：我注意到这对于其他 React 组件也可以正常工作。我使用渲染文本框和文本区域的组件进行了测试。）

Answer 1

您正在通过回调发送旧状态值。 setState 是异步的。

  handleChange = (event) => {
    // Schedule an update to the component with a new state value
    this.setState({value: event.target.value})
    
    // Callback with the outdated state value
    this.props.selectCB(this.state.value)
  }

您可以将其更改为正确的值

  handleChange = (event) => {
    this.setState({value: event.target.value})
    this.props.selectCB(event.target.value)
  }

或者更好的是，删除 state.value 因为它不需要。 而是将状态保留在一个地方（父级），然后向下发送值和回调。

  handleChange = (event) => {
    this.props.selectCB(event.target.value)
  }

  // and
  <select value={this.props.value} />

  // and
  <SelectTag selectCB={this.handleSelectCallback} value={this.state.selectValue} />