Field 表单数据获取、校验工具

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

涉及到表单数据操作、校验的地方都可以用Field来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。

使用注意

• 使用Field init 过的组件，请勿再定义 ref value onChange 事件, 有可能被 init 覆盖。

• Form已经和Field 在数据获取和自动校验提示方面做了深度优化，建议在Form中使用Field, 请查看 Form demo。

• initValue 只有在组件第一次render的时候才生效(ajax异步调用设置initValue可能已经错过了第一次render)，这点类似于defauValue

基本使用

class Demo extends React.Component {
    field = new Field(this);    // 实例创建
    onClick = ()=>{
        console.log(this.field.getValue('name'));
    }
    render() {
        const init = this.field.init;
        // 注意：initVaue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用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演示 关联控制

方法

初始化

let myfield = new Field(this [,options]);

options 配置项

API 接口

new之后的对象提供的 api 接口 （例：myfield.getValues()）(set 开头的 api 函数不要在 render 里面操作, 可能会触发死循环)

init

init(name, options);

返回值

{
  id, value, onChange;
}

rules

{
  rules: [{ required: true }];
}

多个 rule

{
  rules: [
    { required: true, trigger: 'onBlur' },
    { pattern: /abcd/, message: 'abcd不能缺' },
    {
      validator: (rule, value, callback) => {
        callback('出错了');
      }
    }
  ];
}

更加详细的 rules 建议规则见async-validator的 rules 项

• 支持受控模式(value+onChange) 必须

  • value 控制组件数据展现

  • onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)

• 一次完整操作抛一次 onChange 事件 建议比如有 Process 表示进展中的状态，建议增加 API onProcess；如果有 Start 表示启动状态，建议增加 API onStart

• value={undefined}的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据 建议

componentWillReceiveProps(nextProps) {
  if ('value' in nextProps ) {
    this.setState({
      value: nextProps.value === undefined? []: nextProps.value   //  设置组件的被清空后的数值
    });
  }
}

已知问题

• 为何手动调用 this.field.validate 的时候进不了回调函数？ 答: 是不是自定义了 validator 方法,确保callback在任何分支下都能被执行到。

代码示例

自动卸载

autoUnmount 会自动把Unmout的元素删除。getValues里面也会自动remove组件数据

查看源码在线预览

import { Input, Select, Button, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this, {
    autoUnmount: true
  });
  onGetValue() {
    console.log(this.field.getValues());
  }
  render() {
    const { init, getValue } = this.field;
    return (
      <div className="demo">
        <Select {...init("select", { initValue: "yes" })}>
          <li value="yes">yes</li>
          <li value="no">no</li>
        </Select>
        <br />
        {getValue("select") === "yes" ? <Input {...init("input")} /> : null}
        <br />
        <br />
        <Button type="primary" onClick={this.onGetValue.bind(this)}>
          getValue
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

基本

getValue setValue reset 的使用

查看源码在线预览

import { Input, Button, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this);
  onGetValue() {
    console.log(this.field.getValue("input"));
  }
  render() {
    const { init, setValue, reset } = this.field;
    return (
      <div className="demo">
        <Input {...init("input", { initValue: "test" })} />
        <br />
        <br />
        <Button type="primary" onClick={this.onGetValue.bind(this)}>
          getValue
        </Button>
        <Button
          type="primary"
          onClick={() => setValue("input", "set me by click")}
        >
          setValue
        </Button>
        <Button onClick={() => reset()}>reset</Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

自定义组件使用Field

达到效果：Field可以getValue从onChange获取数据，可以setValue通过value控制组件数据切换完全支持: 组件支持受控， 也就是支持两个api：value onChange. value: 设置组件的数据; onChange: 在组件修改的时候在第一个数暴露数据最低标准: 组件有onChange事件可以读取组件数据。达到效果：Field可以getValue，但是setValue无效自己的组件如何接入Field。

查看源码在线预览

import { Button, Field } from "@icedesign/base";
// 最简单的组件
class Custom extends React.Component {
  static propTypes = {
    onChange: React.PropTypes.func, // Field 从组件拿最新值
    value: React.PropTypes.array // Feild 给组件设置新值
  };
  constructor(props) {
    super(props);
    this.state = {
      value: typeof props.value === "undefined" ? [] : props.value
    };
  }
  // 用到了state的需要接受props传过来的value，以更新组件
  componentWillReceiveProps(nextProps) {
    if ("value" in nextProps) {
      this.setState({
        value: typeof nextProps.value === "undefined" ? [] : nextProps.value
      });
    }
  }
  onAdd = () => {
    let value = this.state.value.concat([]);
    value.push("new");
    this.setState({
      value
    });
    this.props.onChange(value);
  };
  render() {
    return (
      <div className="custom">
        {this.state.value.map((v, i) => {
          return <Button key={i}>{v}</Button>;
        })}
        <Button type="primary" onClick={this.onAdd.bind(this)}>
          Add ＋{" "}
        </Button>
      </div>
    );
  }
}
/* eslint-disable react/no-multi-comp */
class App extends React.Component {
  field = new Field(this, {
    deepReset: true
  });
  onGetValue() {
    console.log(this.field.getValue("custom"));
  }
  render() {
    const { init, setValue, reset } = this.field;
    return (
      <div className="demo">
        <Custom {...init("custom", { initValue: ["test"] })} />
        <br />
        <br />
        <Button type="primary" onClick={this.onGetValue.bind(this)}>
          getValue
        </Button>
        <Button
          type="primary"
          onClick={() => setValue("custom", ["test", "setValue"])}
        >
          setValue
        </Button>
        <Button onClick={() => reset()}>reset</Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}
.custom {
    border: 1px dashed;
    padding: 4px;
    display: inline-block;
}
.custom span {
    border: 1px solid green;
    padding: 0px 5px;
    height: 24px;
    display: inline-block;
    margin-right: 2px;
}

组合使用

很多组件

查看源码在线预览

import {
  Button,
  Checkbox,
  Radio,
  Select,
  Range,
  DatePicker,
  TimePicker,
  Field
} from "@icedesign/base";
const { Group: CheckboxGroup } = Checkbox;
const { Group: RadioGroup } = Radio;
const list = [
  {
    value: "apple",
    label: "苹果"
  },
  {
    value: "pear",
    label: "梨"
  },
  {
    value: "orange",
    label: "橙子"
  }
];
const layout = {
  marginBottom: 10,
  width: 400
};
class App extends React.Component {
  field = new Field(this, {
    deepReset: true
  });
  render() {
    const init = this.field.init;
    return (
      <div className="demo">
        <Select {...init("select", { initValue: "lucy" })} style={layout}>
          <li value="jack">jack</li>
          <li value="lucy">lucy</li>
          <li value="disabled" disabled>
            disabled
          </li>
          <li value="hugohua">hugohua</li>
        </Select>
        <br />
        <Range
          style={{ ...layout, marginTop: 30 }}
          slider={"double"}
          scales={10}
          marks={10}
          {...init("range", { initValue: [20, 40] })}
        />
        <div style={{ marginBottom: 10 }}>
          <CheckboxGroup
            dataSource={list}
            {...init("checkboxgroup", { initValue: ["apple"] })}
          />
        </div>
        <div style={{ marginBottom: 10 }}>
          <RadioGroup {...init("radiogroup", { initValue: "b" })}>
            <Radio value="a">A</Radio>
            <Radio value="b">B</Radio>
            <Radio value="c">C</Radio>
            <Radio value="d">D</Radio>
          </RadioGroup>
        </div>
        <div style={{ marginBottom: 10 }}>
          <DatePicker />
        </div>
        <div style={{ marginBottom: 10 }}>
          <DatePicker.RangePicker />
        </div>
        <div style={{ marginBottom: 10 }}>
          <TimePicker />
        </div>
        <Button
          type="primary"
          onClick={() => {
            console.log(this.field.getValues());
          }}
        >
          getValues
        </Button>
        <Button
          onClick={() => {
            this.field.setValues({
              select: "hugohua",
              range: [30, 50],
              checkboxgroup: ["orange"],
              radiogroup: "d"
            });
          }}
        >
          setValues
        </Button>
        <Button
          onClick={() => {
            this.field.reset();
          }}
        >
          reset
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

自定义数据获取

通过 getValueFromEvent 自定义从组件的 Event 获取 value 的方式

查看源码在线预览

import { Button, DatePicker, Upload, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this);
  normFile(list) {
    if (Array.isArray(list)) {
      return list;
    }
    return list && list.fileList;
  }
  normDate(date, strdate) {
    console.log("normDate:", date, strdate);
    return strdate;
  }
  render() {
    const init = this.field.init;
    return (
      <div>
        <DatePicker
          {...init("datepicker", {
            getValueFromEvent: this.normDate
          })}
        />
        <br />
        <br />
        <Upload
          listType="text"
          {...init("upload", {
            getValueFromEvent: this.normFile
          })}
        />
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            console.log(this.field.getValues());
          }}
        >
          getValues
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

关联控制

组件之间的关联控制. onChange 统一管理。

查看源码在线预览

import { Input, Select, Range, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this, {
    onChange: (name, value) => {
      switch (name) {
        case "input":
          this.field.setValue("sync", `被改成了: ${value}`);
          break;
        case "select":
          this.field.setValue("sync", `${value} 来了`);
          break;
        case "range":
          this.field.setValue("sync", `坐标 (${value.join(",")}) ready`);
          break;
      }
    }
  });
  render() {
    const init = this.field.init;
    const layout = {
      marginBottom: 10,
      width: 400
    };
    return (
      <div>
        <Input
          placeholder="我在Field的onChange里面做了控制"
          {...init("input")}
          style={layout}
        />
        <br />
        <Input placeholder="受控同步" {...init("input")} style={layout} />
        <br />
        <Select style={layout} {...init("select", { initValue: "lucy" })}>
          <li value="jack">jack</li>
          <li value="lucy">lucy</li>
          <li value="disabled" disabled>
            disabled
          </li>
          <li value="hugo">hugo</li>
        </Select>
        <br />
        <Range
          style={{ ...layout, marginTop: 30 }}
          slider={"double"}
          scales={10}
          marks={10}
          {...init("range", { initValue: [20, 40] })}
        />
        <br />
        <hr style={{ marginBottom: 10 }} />
        <Input
          placeholder="我就是被人打的波波, 谁都能控制我"
          {...init("sync")}
          style={layout}
        />
        <br />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

redux中使用

在redux中使用, 在componentWillReceiveProps更新

查看源码在线预览

import { Input, Button, Field } from "@icedesign/base";
import { combineReducers, createStore } from "redux";
import { Provider, connect } from "react-redux";
function formReducer(state = { email: "frankqian@qq.com" }, action) {
  switch (action.type) {
    case "save_fields":
      return {
        ...state,
        ...action.payload
      };
    default:
      return state;
  }
}
class Demo extends React.Component {
  static propTypes = {
    email: React.PropTypes.string,
    dispatch: React.PropTypes.func
  };
  componentWillReceiveProps(nextProps) {
    this.field.setValues({
      email: nextProps.email,
      newlen: nextProps.email.length
    });
  }
  field = new Field(this, {
    onChange: (name, value) => {
      console.log("onChange", name, value);
      this.field.setValue("newlen", value.length);
      this.props.dispatch({
        type: "save_fields",
        payload: {
          [name]: value
        }
      });
    }
  });
  setEmail() {
    this.props.dispatch({
      type: "save_fields",
      payload: {
        email: "qq@gmail.com"
      }
    });
  }
  render() {
    const init = this.field.init;
    const newLen = init("newlen", { initValue: this.props.email.length });
    return (
      <div>
        <Input
          {...init("email", {
            initValue: this.props.email,
            rules: [
              {
                required: true,
                type: "email",
                message: "用户名至少为 5 个字符"
              }
            ]
          })}
        />
        现在的长度是:{newLen.value}
        <p>email: {this.props.email}</p>
        <Button onClick={this.setEmail.bind(this)}>set</Button>
      </div>
    );
  }
}
const ReduxDemo = connect(state => {
  return {
    email: state.formReducer.email
  };
})(Demo);
const store = createStore(
  combineReducers({
    formReducer
  })
);
ReactDOM.render(
  <Provider store={store}>
    <div>
      <ReduxDemo />
    </div>
  </Provider>,
  mountNode
);

自定义错误

自己控制组件的errors

查看源码在线预览

import { Input, Button, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this);
  render() {
    const { init, getError, setError, setErrors } = this.field;
    return (
      <div className="demo">
        <Input
          {...init("input", {
            rules: {
              required: true,
              pattern: /hello/,
              message: "我是真正的错误信息，必须填写hello"
            }
          })}
        />
        <br />
        <span style={{ color: "red" }}>{getError("input")}</span>
        <br />
        <Button
          onClick={() => {
            setError("input", "设置的错误信息");
          }}
        >
          setError
        </Button>
        <Button
          onClick={() => {
            setErrors({ input: "设置的错误信息2" });
          }}
        >
          setErrors
        </Button>
        <Button
          onClick={() => {
            setErrors({ input: "" });
          }}
        >
          clear
        </Button>
        <br />
        <br />
        <Input {...init("input2")} />
        <br />
        <span style={{ color: "red" }}>{getError("input2")}</span>
        <br />
        <Button
          onClick={() => {
            setError("input2", "设置的错误信息onChange后会被去除");
          }}
        >
          setError
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

获取对象或数组

把 init('arr.0') 的数据转换成 obj={arr:['']}；把 init('a.b') 的数据转换成 obj={a:{b:'value'}}；

查看源码在线预览

import { Input, Button, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this, {
    parseName: true // 这里打开开关
  });
  onGetValue() {
    console.log(this.field.getValues());
  }
  onSetValue() {
    this.field.setValues({
      a: {
        b: "b",
        c: "c"
      },
      arr: ["first", "second"]
    });
  }
  render() {
    const { init, reset } = this.field;
    return (
      <div className="demo">
        <h2>对象转换</h2>
        <Input {...init("a.b", { initValue: "test1" })} /> &nbsp;
        <Input {...init("a.c", { initValue: "test2" })} />
        <br />
        <h2>数组转换</h2>
        <Input {...init("arr.0", { initValue: "0" })} /> &nbsp;
        <Input {...init("arr.1", { initValue: "1" })} />
        <br />
        <br />
        结构化数据:
        <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>
        <br />
        <br />
        <Button type="primary" onClick={this.onGetValue.bind(this)}>
          getValues
        </Button>
        <Button onClick={this.onSetValue.bind(this)}>setValues</Button>
        <Button onClick={() => reset()}>reset</Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

校验

注意：Form和Field做了深度结合，在Form中使用Field，错误信息不需getError获取会自动展现。校验的错误信息需要用getError获取

查看源码在线预览

import { Input, Button, Checkbox, Field } from "@icedesign/base";
const CheckboxGroup = Checkbox.Group;
const list = [
  {
    value: "apple",
    label: "苹果"
  },
  {
    value: "pear",
    label: "梨"
  },
  {
    value: "orange",
    label: "橙子"
  }
];
class App extends React.Component {
  state = {
    checkboxStatus: true
  };
  field = new Field(this, { scrollToFirstError: true });
  isChecked(rule, value, callback) {
    if (!value) {
      callback("没有勾选同意协议");
    } else {
      callback();
    }
  }
  userName(rule, value, callback) {
    if (value === "frank") {
      setTimeout(() => callback("名称已经存在"), 200);
    } else {
      setTimeout(() => callback(), 200);
    }
  }
  render() {
    const init = this.field.init;
    return (
      <div className="demo">
        <Input
          {...init("input", {
            initValue: "删除试试",
            rules: { required: true }
          })}
        />
        {this.field.getError("input") ? (
          <span style={{ color: "red" }}>
            {this.field.getError("input").join(",")}
          </span>
        ) : (
          ""
        )}
        <br />
        <br />
        <Input
          placeholder="离开焦点onBlur"
          {...init("input1", {
            rules: {
              required: true,
              message: "不能为空",
              trigger: ["onBlur", "onChange"]
            }
          })}
        />
        {this.field.getError("input1") ? (
          <span style={{ color: "red" }}>
            {this.field.getError("input1").join(",")}
          </span>
        ) : (
          ""
        )}
        <br />
        <br />
        <Input
          defaultValue=""
          placeholder="填写frank"
          {...init("username", {
            rules: {
              validator: this.userName,
              trigger: ["onBlur", "onChange"]
            }
          })}
        />
        {this.field.isValidating("username") ? "正在校验中..." : ""}
        {this.field.getError("username") ? (
          <span style={{ color: "red" }}>
            {this.field.getError("username").join(",")}
          </span>
        ) : (
          ""
        )}
        <br />
        <br />
        是否同意以上协议:
        <Checkbox
          {...init("checkbox", {
            valueName: "checked",
            rules: { validator: this.isChecked }
          })}
        />
        {this.field.getError("checkbox") ? (
          <span style={{ color: "red" }}>
            {this.field.getError("checkbox").join(",")}
          </span>
        ) : (
          ""
        )}
        <br />
        <br />
        <Input
          multiple
          maxLength={10}
          defaultValue="字符串长度在3-10之间"
          {...init("textarea", {
            rules: [
              {
                required: true,
                min: 3,
                max: 10
              }
            ]
          })}
        />
        {this.field.getError("textarea") ? (
          <span style={{ color: "red" }}>
            {this.field.getError("textarea").join(",")}
          </span>
        ) : (
          ""
        )}
        <br />
        <br />
        {this.state.checkboxStatus ? (
          <div>
            数组类型的数据校验：
            <CheckboxGroup
              dataSource={list}
              {...init("checkboxgroup", {
                rules: {
                  required: true,
                  type: "array",
                  message: "必须勾选一个吧"
                }
              })}
              style={{ marginBottom: 10 }}
            />
            {this.field.getError("checkboxgroup") ? (
              <span style={{ color: "red" }}>
                {this.field.getError("checkboxgroup").join(",")}
              </span>
            ) : (
              ""
            )}
          </div>
        ) : null}
        <br />
        <br />
        <Button
          type="primary"
          onClick={() => {
            this.field.validate((errors, values) => {
              console.log(errors, values);
            });
          }}
        >
          validate
        </Button>
        <Button
          onClick={() => {
            this.field.reset();
          }}
        >
          reset
        </Button>
        <Button
          onClick={() => {
            if (this.state.checkboxStatus) {
              this.setState({ checkboxStatus: false });
              this.field.remove("checkboxgroup");
            } else {
              this.setState({ checkboxStatus: true });
            }
          }}
        >
          {this.state.checkboxStatus ? "delete" : "restore"}
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.demo .next-btn {
    margin-right: 5px;
}

自定义受控字段

valueName的默认值为value，如果为其他需要用valueName指定

查看源码在线预览

import { Button, Checkbox, Radio, Switch, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this);
  render() {
    const init = this.field.init;
    return (
      <div className="demo">
        <Radio {...init("radio", { initValue: false, valueName: "checked" })}>
          {" "}
          checked
        </Radio>
        <br />
        <Checkbox
          {...init("checkbox", { initValue: true, valueName: "checked" })}
        >
          defaultChecked
        </Checkbox>
        <br />
        <Switch
          {...init("switch", { initValue: false, valueName: "checked" })}
          style={{ marginTop: 10, marginBottom: 10 }}
        />
        <br />
        <Button
          type="primary"
          onClick={() => {
            console.log(this.field.getValues());
          }}
        >
          getValues
        </Button>
        <Button
          onClick={() => {
            this.field.setValues({
              radio: true,
              switch: true,
              checkbox: false
            });
          }}
        >
          {" "}
          setValues{" "}
        </Button>
        <Button
          onClick={() => {
            this.field.reset();
          }}
        >
          reset
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);