javascript - 检索下拉列表中所选元素的值 - ReactJS

Question

我是 React 的初学者，正在尝试了解绑定(bind)和事件。我创建了一个学习项目，想要验证 onChange 上的下拉菜单。如果未从下拉列表中选择任何值，则显示错误消息。

注意:我正在使用一个自定义库，该库具有 SelectField 组件的 inValid 和 error 属性。如果inValid设置为true，则会触发错误消息。

我尝试从多个来源寻找解决方案，并尝试解决这个问题几个小时。请看一看。提前致谢。

WeatherOptionsView.js

class WeatherOptionsView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { reasonState: false, selectValue: null };
  }

  validateState(event) {
    if(!! event.target.selectValue ) {
      this.setState({reasonState: true});
    } 
  }

  render() {
    const cx = classNames.bind(styles);

    return (
      <ContentContainer fill>
        <Spacer marginTop="none" marginBottom="large+1" marginLeft="none" marginRight="none" paddingTop="large+2" paddingBottom="none" paddingLeft="large+2" paddingRight="large+2">
          <Fieldset legend="City">
            <Grid>
              <Grid.Row>
                <Grid.Column tiny={3}>
                    <SelectField selectId="city" required placeholder="Select" label={["City:"]} error={["Error message"]} onChange={this.validateState.bind(this)} isInvalid={this.state.reasonState} value={this.state.selectValue}>
                      <Select.Option value="City1" display="City1" />
                      <Select.Option value="City2" display="City2" />
                    </SelectField>
                </Grid.Column>
              </Grid.Row>
             </Grid>
        )}
        />
      </ContentContainer>
    );
  }
}

export default injectIntl(WeatherOptionsView);

未捕获类型错误:无法读取未定义的属性“selectValue”

Answer 1

您的问题不在于绑定(bind)，而在于您的 validateState 实现。您正在期待事件，但 SelectField 组件可能正在传递值。该值没有您想要的目标属性。尝试这样的事情:

handleChange(value) {
    this.setState({selectValue: value, reasonState: !value});
}

// and then in the render: 

<SelectField onChange={this.handleChange.bind(this)}>
    {/* ... */}
</SelectField>