react ant.designForm手动获取修改值

关于react ant.design中Form如何手动获取修改值

一、获取Form表单中的值

在开发中，会碰到一些场景，就是用户在输入或者选择了一些信息，需要及时的验证这些信息，这时候就需要手动获取Form表单数据了

			<Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} label="请选择***">
                  {form.getFieldDecorator('ntcs', {
                    rules: [{ required: true, message: `请选择***` }],
                  })(
                    <Select
                      placeholder="请选择***"
                      mode="multiple"
                      allowClear
                      onBlur={e => {
                        this.onBlur(e);
                      }}
                      onChange={e => {
                        this.onChange(e, '***');
                      }}
                    >
                      {dataList.map(item => {
                        return (
                          <Select.Option
                            key={item.id}
                            value={item.id}
                            disabled={item.disabled ? item.disabled : false}
                          >
                            {item.hote}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  )}
              </Form.Item>

这时Select的组件设置了mode="multiple"属性，就证明了可以多选，但是实际上多选是有数量限制的，那如何知道我选择到了数量上限并给他提示呢？这时候就得在onChange事件中手动获取值来判断了，这时候需要用到this.props.form.getFieldValue(‘ntcs’);就可以获取到对应的值了

二、修改表单的值

有时候会通过表单控制触发联动效果，并赋值，这时候就需要修改表单中的某些值

<Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label="测试1">
                {form.getFieldDecorator('is_retest', {
                  initialValue: 0,
                  rules: [{ required: true, message: '请选择是否测试1' }],
                })(
                  <Radio.Group onChange={e => this.onChange(e)}>
                    <Radio value={0}>否</Radio>
					<Radio value={1}>是</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
<Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label="测试2">
                {form.getFieldDecorator('report_type', {
                  initialValue: 0,
                  rules: [{ required: true, message: '请选择测试2' }],
                })(
                  <Radio.Group disabled={!!reportDisabled}>
                    <Radio value={0}>测试3</Radio>
					<Radio value={1}>测试4</Radio>
                  </Radio.Group>
                )}
              </Form.Item>

效果：当测试1选择了是时测试2就需要禁用并默认值修改为选中测试3，这时候又要修改值又要禁用，这时候需要使用this.props.form.setFieldsValue({ report_type: 0 });这时在onChange中是这样操作的

onChange = e => {
    const { form } = this.props;
    const { value } = e.target;
    if (value === 1) {
      this.setState({ reportDisabled: true });
      form.setFieldsValue({ report_type: 0 });
    } else {
      this.setState({ reportDisabled: false });
    }
  };

其实关于手动操作Form表单的方法还有很多，官方也给了很多，比如

获取表单的全部值：this.props.form.getFieldsValue();

清空表单的值：this.props.form.resetFields();

当然这些都是 react antDesign手动设置表单的值操作 总结的不是很好，

有瑕疵的地方还望各位大佬多多指教

这篇好文章是转载于：学新通技术网