Question

我需要将选择作为必填字段。我尝试添加必需的标签，但这没有帮助。

如果用户未选择任何内容并单击“提交”，则需要显示一些UI消息，以使他们从下拉菜单中选择一个选项。

 <Form onSubmit={e => this.handleSubmit(e)}>

                    <ModalHeader toggle={this.toggle}>Select Report Type</ModalHeader>
                    <ModalBody>
                                <FormGroup>
                                    <Input type="select" required name="reportType" id="reportType" onChange={(e) => this.setState({type: e.target.value})}>
                                        <option value=""> -- select an option -- </option>
                                        <option value={"Assignment"}>Assignment</option>
                                        <option value={"Intermediate"}>Intermediate</option>
                                        <option value={"Final"}>Final</option>
                                        <option value={"Raw"}>Raw</option>
                                    </Input>
                                </FormGroup>

                    </ModalBody>
                    {<ModalFooter>
                        <Button style={{fontSize:'14px'}} color="primary"  onClick={e => this.getReport(e)}>Submit</Button>
                        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                    </ModalFooter>}
</Form>

Answer 1

如果没有任何特定原因要使用Input组件，则可以使用支持所需属性的html select tag。

这意味着您只需将<Input type="select" ...替换为<select ...

我假设这不是一个本机应用程序，因为它在那里不起作用。（该代码看起来不像React本机代码，而更像是普通的React Web代码。）

输入选择强制选择

1 个答案: