Question

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

2020-01-31

87

javascript reactjs

我是 React 的新手，正在尝试了解绑定和事件。我创建了一个学习项目，并希望在 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);

未捕获的 TypeError：无法读取未定义的属性“selectValue”

Answer 1

您的问题不在于绑定，而在于您的 validateState 实现。您期待的是 event ，但 SelectField 组件可能正在传递值。该值没有您想要的目标属性。请尝试以下方法：

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

// and then in the render: 

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

Answer 2

正如它所说的 Uncaught TypeError: Cannot read property 'selectValue' of undefined ，event.target 值未定义。此外，您必须在本地状态 onChange 中设置 selectValue 以发送值 prop。

javascript react.js