如何在语义UI中制作Form.Dropdown

Question

我有一个包含8个字段的表单，但是只有2个字段是必填字段，它们是Form.Dropdown输入。我试图将它们设置为“必填”字段，这意味着如果用户在未填写这些字段的情况下单击“下一步”，则它们将无法继续进入下一页。我想我已经正确设置了表单，我可能只需要按钮本身和onSubmit功能方面的帮助。这是下拉菜单的代码：

<Form.Dropdown 
                                inline
                                options={testOptions}
                                label='Office'
                                selection
                                className="dropdown1"
                                name='Office'
                                onChange={this.handleOfficeChange}
                                value={Office}
                                required={true}
                                />

这里是下一个按钮：

<Grid.Row>
  <Button type="submit" className="nextbuttonuser" onClick={this.handleClick}>Next</Button>
 </Grid.Row>

最后是handleClick（下一个按钮的代码）：

  handleClick() {
    authAxios.put(UpdateUserURL, {
        email: loginNameWithDomain, name: name, Office: this.state.Office,
        tel: this.state.tels, telephone: this.state.telephoneA,
        homeOffice: this.state.home, country: this.state.country
    })
        .then(response => {
            this.props.history.push('./nextpage');
        })
        .catch((error) => {
            console.log('error ' + error);
            this.setState({
                errorredirect: true
            });
            this.setState({
                loading: false
            })
            this.props.history.push('./error');
        });
}

Answer 1

您可以这样做

<Form.Field
             control={Dropdown}
             inline
             options={testOptions}
             label='Office'
             selection
             className="dropdown1"
             name='Office'
             onChange={this.handleOfficeChange}
             value={Office}
             required
   />

从Semantic-ui-react的文档来看，它看起来不像Form.Dropdown具有必需的道具，但是您可以将其设为受控组件并传递必需的道具。 Form.Field接受必需的属性。

希望对您有帮助。