1.input API 属性 属性名(name) 类型(type) 必要性(Required) 默认值(default) 描述(description) inputName String true 无 render Object true {flag: ""} formText String false hintText String false bindchangeValue Fun false remarks Object false required Boolean false false disabled Boolean false false dataType String false default formType String false default regex 示列正则 regex="^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$" regexText String false errorText String false formItemBoxSty String false 如:formItemBoxSty="background: #fff;" formTextSty String false formValueSty String false valueAlign String false right 2.安装 npm install "react-form-ui-y" --save 3.使用 reducers.js import {combineReducers} from 'redux' import {formData, subVerifyRes} from './form/index'//表单 const CombineReducers = combineReducers({ formData,//表单数据 subVerifyRes//表单校验的方法 }); export default CombineReducers demo.jsx import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import {InputField,actionForm} from 'react-form-ui-y'; class TestInput extends Component { constructor(props) { super(props); this.state = {}; }; changeValue = (obj) => { console.log("changeValue-obj:", obj); //如果有需要用到级联赋值之类的,如,修改姓名自动给base赋值 //如果不需要赋值,此方法当忽略 if (obj.name == "zhName") { let data = [ { type: "input",//type 类型 name: "base",//name input名称 唯一标识 text: "深圳",//text input值 value: "深圳",//input 的 text 与value一样 obj: {},//input 没有obj remarks: null,//备注 传什么进去 传什么出来 other: {// required: true//在设置值的时候,如果此项为必填项,required必须设置为true } }, //多个赋值同上 ]; this.props.dispatch.setFormData(data); // this.props.dispatch.setFormData(data,"table") 默认default } }; resetFn = () => { //默认重置全部 什么都不传 this.props.dispatch.resetForm();//默认重置全部 什么都不传 //指定重置 可获取全部的key看看需要传哪些 也可以手写如 ["default","table"] // let formKey = Object.keys(this.props.formData);// // this.props.dispatch.resetForm(["default"]) }; submitFn = () => { let _this = this; //设置必填校验 默认校验 ["default"] _this.props.dispatch.submitVerify(_this.props.formData); // 如果需要指定校验或者全校验 可获取全部的key看看需要传哪些 也可以 ["default","table"] // let formKey = Object.keys(_this.props.formData); // _this.props.dispatch.submitVerify(_this.props.formData, ["default", "table"]); //在回调了监听返回值 _this.props.subVerifyRes setTimeout(function () { console.log("subVerifyRes", _this.props.subVerifyRes); if (_this.props.subVerifyRes.default == "success") { console.log("可提交", _this.props.formData) } else { console.log('还有必填项未填', _this.props.formData); } }, 100); }; componentDidMount() { } render() { console.log('this.props.formData', this.props.formData); return (
) } } const mapStateToProps = state => ({ formData: state.formData, subVerifyRes: state.subVerifyRes, }); const mapDispatchToProps = dispatch => ({ dispatch: bindActionCreators(actionForm, dispatch), }); export default connect(mapStateToProps, mapDispatchToProps)(TestInput);