javascript - 如何监听 react 语义下拉元素的变化？

Question

我从父组件传递给子组件 handleOnChange 函数，它应该监听 Dropdown 中的更改(来自 React-SemanticUI)。

但是我在某个地方犯了错误。我得到未定义的值 onChange 事件监听器。

父组件:

   class AwwWrapper extends Component {
          state = {
            injuredWorkerType: '',
            totalDays: '',
          }

          onChangeInjuredWorkerType = event => {
            this.setState({ injuredWorkerType: event.target.value })
          }

          render() {
            return (
              <Segment
                raised
                style={{
                  backgroundColor: '#F0F0F0',
                }}
              >
              // HERE IS CHILD COMPONENT IN WHICH I PASS EVENT HANDLER  
                <InjuredWorkerPayFields2
                  {...this.props}
                  onChangeInjuredWorkerType={this.onChangeInjuredWorkerType}
                  injuredWorkerType={this.state.injuredWorkerType}
                />
              </Segment>
            )
          }
        }

        export default AwwWrapper

子组件:

  return (
    <Form.Group widths={'equal'} style={{ marginTop: '2rem' }}>
      <Form.Field required width={5}>
        <label style={{ fontSize: '0.85rem' }}>2a. Injured worker type:</label>
        <Dropdown
          onChange={props.onChangeInjuredWorkerType}
          selection
          name={'injured_worker_type'}
          placeholder={'Worker Type'}
          options={workerTypeOptions}
          value={props.injuredWorkerType}
        />
      </Form.Field>   
    </Form.Group>
  )
}

export default InjuredWorkerPayFields2

为什么我在这里得到未定义的值？？

 `  
 onChangeInjuredWorkerType = event => {
 this.setState({ injuredWorkerType: event.target.value })
}
 ` 

Answer 1

因为您在此处将 props.injuredWorkerType 作为值分配给 DropDown value={props.injuredWorkerType}。所以 props.injuredWorkerType 将是未定义的。您似乎没有从父组件中的 onChangeInjuredWorkerType 中受益。因此，我建议您在子组件中声明处理函数并自行管理状态，而不是使用回调。

或者如果你想要它像现在这样然后尝试下面的解决方案

 <Dropdown
      onChange={props.onChangeInjuredWorkerType}
      selection
      name={'injured_worker_type'}
      placeholder={'Worker Type'}
      options={workerTypeOptions}
      value={props.injuredWorkerType ? props.injuredWorkerType : ""}
    />