概述
當(dāng)使用 React 進(jìn)行一些用戶輸入的行為時揭措，我們需要拿到用戶輸入，即將輸入框設(shè)置為受控組件，這時需要使用其他的庫柑潦，我們主要使用 rc-form 這個庫，它是 react 高階 form 組件峻凫。官方文檔
使用
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);
說明：
static用法渗鬼。關(guān)鍵字static用于定義靜態(tài)方法，并且不能在類的實(shí)例上調(diào)用靜態(tài)方法荧琼，而應(yīng)該通過類本身調(diào)用譬胎。上述例子中定義propTypes屬性，不太懂命锄？堰乔？？并且后面都沒有用到這個屬性的通過
createForm()(Form)使得組件Form的props上掛載了一個form對象脐恩，并且這個this.props.form對象有getFieldProps镐侯、getFieldError和validateFields三個方法直接在
input上掛載rc-form的屬性即可將input設(shè)置為受控組件
API
createForm
getFieldProps
getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
將會在可以支持 value 和 onChange 接口的 input 或者 inputComponent 設(shè)置 props。設(shè)置之后將會創(chuàng)建一個綁定在 input 上
<form>
<input {...getFieldProps('name', { ...options })} />
</form>
name: String
這個 input 唯一的 name
option: Object
| Option | Description | Type | Default |
|---|---|---|---|
| option.valuePropName | 組件 value 字段的屬性名稱驶冒，eg. checkbox 應(yīng)該設(shè)置為 checked
|
String | 'value' |
| option. getValueProps | 從 value 字段中獲取組件 props
|
(value): Object | (value) => ({value}) |
| option.initialValue | 當(dāng)前組件的初始值 | any | - |
| option. normalize | 返回標(biāo)準(zhǔn)化值 | (value, prev, all): Object | - |
| option.trigger | 用于收集表單數(shù)據(jù)的事件 | String | 'onChange' |
| option.validateTrigger | 被監(jiān)聽已驗證的事件苟翻，設(shè)置為 falsy 以僅在調(diào)用 props.validateFields 時驗證 |
String | String[] |
| option.rules | 驗證規(guī)則，詳情 | Object[] | - |
| option.validateFirst | 是否停止驗證這個字段的第一個 error 規(guī)則 | Boolean | false |
| option.validate | Object[] | - | |
| option.hidden | 忽略當(dāng)前字段當(dāng)驗證或者獲取這個字段時 | Boolean | false |
| option.preserve | 是否保留該值骗污，當(dāng)字段卸載并重新安裝時崇猫，該值將保持不變 | Boolean | false |
| option.getValueFromEvent | 指定如何從事件中獲取值 | (e): any | 詳情見下面 |
option.getValueFromEvent 的默認(rèn)值
function defaultGetValueFromEvent(e) {
if (!e || !e.target) {
return e;
}
const { target } = e;
return target.type === 'checkbox' ? target.checked : target.value;
}
validateField
validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
通過字段名驗證并且獲取字段值
options
options 和 async-validator 的方法相同，并且增加了 force 和 scroll
-
force: Boolean -> 是否驗證已經(jīng)驗證過的字段( 由于validateTrigger引起 )身堡，默認(rèn)值是false -
scroll-> 和 dom-scroll-into-view's function parameterconfig相同
