开发指南
何时使用
涉及到表单数据操作、校验的地方都可以用Field来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。
使用注意
使用Field
init过的组件,valueonChange必须放在 init 的第三个参数, 否则有可能被 init 覆盖。Form已经和Field在数据获取和自动校验提示方面做了深度优化，建议在Form中使用Field, 请查看 Form demo。initValue 类似组件的 defaultValue 只有在组件第一次render的时候才生效(ajax 异步调用设置 initValue 可能已经错过了第一次render)
autoUnmount 默认打开的，如果需要保留会
自动卸载的组件数据请关闭此项parseName=true可以通过getValues获取到结构化的数据, 但是 getValue 还是必须传完整 key 值
基本使用
class Demo extends React.Component {
field = new Field(this); // 实例创建
onClick = ()=>{
console.log(this.field.getValue('name'));
}
render() {
const init = this.field.init;
// 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue
return <div>
<Input {...init('name',{initValue:'first value'})} />
<button onClick={this.onClick>获取数据</button>
</div>
}
}更新数据
事件更新
class Demo extends React.Component {
field = new Field(this);
onClick = ()=>{
this.field.setValue('name', 'newvalue'); // 赋值会自动触发render
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
<button onClick={this.onClick}>设置数据</button>
</div>
}
}props更新
class Demo extends React.Component {
field = new Field(this);
// 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)
componentWillMount() {
this.field.setValue('name', 'init Name')
}
// 接收来自props的数据
componentWillReceiveProps(nextProps) {
this.field.setValue('name', nextProps.name)
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
</div>
}
}ajax更新
class Demo extends React.Component {
field = new Field(this);
onClick = ()=>{
Ajax({
url:'/demo.json',
success:(json)=>{
// 回调事件中赋值更新
this.field.setValue('name',json.name);
}
});
}
render() {
const init = this.field.init;
return <div>
<Input {...init('name')} />
<button onClick={this.onClick}>设置数据</button>
</div>
}
}onChange更新监控
两种用法： 1. 统一管理
class Demo extends React.Component {
field = new Field(this,{
onChange:(name, value) => {
switch(name) {
case 'name1':
this.field.setValue('name2','value set by name1');
break;
case 'name2':
this.field.setValue('name1','value set by name2');
break;
}
}
});
render() {
const init = this.field.init;
return <div>
<Input {...init('name1')} />
<Input {...init('name2')} />
</div>
}
}各自管理
class Demo extends React.Component {
render() {
const init = this.field.init;
return <div>
<Input {...init('name1',{
props:{
onChange:(v)=>{
this.field.setValue('name2','value set by name1');
}
}
})} />
<Input {...init('name2',{
props:{
onChange:(v)=>{
this.field.setValue('name1','value set by name2');
}
}
})} />
</div>
}
}详细请查看demo演示 关联控制