Question

我正在使用reactjs，正在使用ant.design选择模块从下拉菜单中选择其他技能。我想检查提交表单时至少选择了三个选项。我还将与您共享代码你们可以帮助我如何解决此问题

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

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

Answer 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

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

1 个答案: