Question

我是Reactjs的新手。我正在尝试使用多个选择选项来实现下拉菜单，并且还包括验证。

到目前为止，我实现了以下代码：

import React from 'react';
import {
    Button,
    ControlLabel,
    FormControl,
    FormGroup,
    HelpBlock,
    ToggleButton,
    ToggleButtonGroup,
    Checkbox,
    DropdownButton,
    Alert
    } from 'react-bootstrap';

 import {Link} from "react-router-dom";
    ...


 handleCheck(val) {
    return this.state.Ids.some(item => val === item);
 }

 handleIds(e){
   let id = null;
   if(e.target.value){
        id = parseInt(e.target.value, 10);
        if(e.target.checked) {
            if(!this.handleCheck(e.target.value)) {
                this.state.Ids.push(id);
            }
        } else {
            this.state.Ids.splice(this.state.Ids.indexOf(id));
        }
   }
 }


 render() {
   return(

     <DropdownButton title="Select">
       {this.state.items.map((item) => 
           <Checkbox style={{ marginLeft: '15px' }}
                     checked={this.handleCheck(item.id)}
                     value={item.id} 
                     onChange={this.handleIds}>
               {item.name}
           </Checkbox>)}
     </DropdownButton>

      <FormGroup
           controlId="formAcdId"
           validationState={this.validateNotEmpty(this.state.acdId)}
       >
          <ControlLabel>Acd Id</ControlLabel>
          <FormControl
                type="text"
                value={this.state.acdId}
                placeholder="Enter acdId"
                onChange={this.handleAcdId}
          />
          <FormControl.Feedback />

     </FormGroup>

   );
 }

但是这里的问题是即使我单击复选框也没有显示刻度线。

在我编辑下一张表格后显示。（在此示例中，当我尝试编辑acdId表单时）

我认为在我单击复选框后，checked = {this.handleCheck（item.id）}不会立即触发，而是会在一段时间后触发。

您能为此提供解决方案吗？

就像我为acdId实现验证状态一样，如何为下拉菜单？

注意：我没有添加所有代码。仅添加了用于问题描述的模块。

javascript-如何在reactjs中使用多个选择实现下拉列表并包括验证？

0 个答案: