首页 > 解决方案 > 输入选择 强制选择

问题描述

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

如果用户没有选择任何内容并单击提交,则需要一些 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>

标签: javascripthtmlreactjs

解决方案


如果您没有任何特定理由使用 Input 组件,您可以只使用支持所需属性的html select 标记。

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

我假设这不是一个 react-native 应用程序,因为它在那里不起作用。(代码看起来不像 react-native 代码,而更像是普通的 react web 代码。)


推荐阅读