首页 文章

检查在ReactJS中的表单提交中选择至少三个选项

提问于
浏览 1134
0

我正在研究reactjs,我正在使用 ant.design 选择模块从下拉菜单中选择不同的技能 . 我想检查表单提交中至少选择三个选项 . 我也会和你分享代码你们能帮助我解决这个问题

<FormItem>
          {getFieldDecorator('skills', {
            rules: [
              {
                required: true,
                message: 'Please select skillset!',
              },
            ],
          })(
            <Select
              mode="tags"
              style={{ width: '100%' }}
              defaultValue={defaultSkills}
            >

              {children}
            </Select>,
          )}
        </FormItem>

1 回答

  • 1

    由于您使用的是 antd ,因此可以选择多选: mode="multiple" 然后您将在handleChange方法中拥有一系列选定值,您可以检查所需的条件 . 这是一个例子:

    const Option = Select.Option;
    
    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }
    
    function handleChange(value) {
      // Value is a array of selected values ["a10", "f15", "g16"]
      console.log(value); 
    
      // Do rest of your code here
    }
    
    ReactDOM.render(
      <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder="Please select"
        onChange={handleChange}
      >
        {children}
      </Select>,
      document.getElementById('container')
    );
    

    https://codesandbox.io/s/pk6nmk560

相关问题