如何监听反应语义下拉元素的变化？答案

【问题标题】：How to listen for changes in react semantic dropdown element?如何监听反应语义下拉元素的变化？
【发布时间】：2018-10-04 11:55:46
【问题描述】：

我从父组件传递给子组件 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 })
}
 `

【问题讨论】：

标签： javascript reactjs

【解决方案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 : ""}
    />

【讨论】：