ANTD FORM表单 自定义组件 取值

1.受控组件

当使用 React 进行一些用户输入或者选择的行为时，我们需要拿到用户输入或选择，即将输入框设置为受控组件。

import { createForm, formShape } from 'rc-form';
 
class Form extends React.Component {
  static propTypes = {
    form: formShape,
  };
 
  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error, value);
    });
  }
 
  render() {
    let errors;
    const { getFieldProps, getFieldError } = this.props.form;
    return (
      <div>
        <input {...getFieldProps('normal')}/>
        <input {...getFieldProps('required', {
          onChange(){},  // have to write original onChange here if you need
          rules: [{required: true}],
        })}/>
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button onClick={this.submit}>submit</button>
      </div>
    );
  }
}
 
export createForm()(Form);

 

1. 通过 createForm()(Form) 使得组件 Form 的 props 上挂载了一个 form 对象，并且这个 this.props.form 对象有 getFieldProps 、 getFieldError 和 validateFields 三个方法

2. 直接在 input 上挂载 rc-form 的属性即可将 input 设置为受控组件

<form>
  <input {...getFieldProps('name', { ...options })} />
</form>

 

2. API

 3、开关Switch

开关Switch，默认值选中和未选中的checked的类型为 布尔类型，现在需要将类型改为字符串（Number同理）

getValueFromEvent

设置如何将 event 的值转换成字段值

(..args: any[]) => any

			 <Switch
                checkedChildren={"是"}
                unCheckedChildren={"否"}
                checked={this.state.checked}
                {...getFieldProps(value.field, {
                    initialValue: selectValue ? selectValue : value.initValue,
                    onChange: (v) => {
                      ...
                    },
                    getValueFromEvent: value => {  // 判断类型
                      return value ? '0' : '1';
                    }
                  })}
            />