UNPKG

react-form-ui-y

Version:

149 lines (132 loc) 6.9 kB
1.input API 属性 属性名(name) 类型(type) 必要性(Required) 默认值(default) 描述(description) inputName String true 无 formText String false errorText String false 该值不能为空 报错提示 changeValue Fun false remarks Object false dataSource Object true 无 单选项值 格式必须为 [{text:"女",value:"F"},{text:"男",value:"M"}] required Boolean false false disabled Boolean false false designationTheme String false default 主题类型:default(默认),tender dataType String false default 表单赋值的类型,如获取的formData,默认结果formData formType String false default(box) 表单类型 textWidth String false valueWidth String false textAlign String false left(formType:"box"默认left,default默认right) right center(无) 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 {CheckboxField,actionForm} from 'react-form-ui-y'; let dataSource = [ {text: "玫瑰花", value: "meiguihua"}, {text: "蝴蝶兰", value: "hudeilan"}, {text: "野菊", value: "yeju"}, {text: "茉莉花", value: "molihua"}, ]; class TestCheckBox extends Component { constructor(props) { super(props); this.state = {}; }; changeValue = (obj) => { console.log("changeValue-obj:", obj); //如果有需要用到级联赋值之类的,如,修改姓名自动给base赋值 //如果不需要赋值,此方法当忽略 if (obj.name == "zhName") { let data = [ { type: "checkbox",//type 类型 name: "say2",//name textarea 名称 唯一标识 text: "深圳",//text textarea 值 value: "深圳",//textarea 的 text 与value一样 obj: {},//textarea 没有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 ( <div> <div style={{display: "flex"}}> <CheckboxField inputName="checkbox1" //表单唯一的ID不能重复必填 formText="复选按钮" //描述不传就没有描述 required={true} //是否是必填项 changeValue={this.changeValue} //改变输入框值的时候触发的方法有需要就用无需要就不用 remarks={[1, 2, 3]} //备注传送器传什么进去传什么出来 //checkbox 特有 dataSource={dataSource}//单选项值 格式必须为 [{text:"",value:"F"},{text:"",value:"M"}] //disabled={true} //designationTheme = ""//主题类型default默认),tender //formType="box" //表单类型default默认),box //dataType="table"//表单赋值的类型如获取的formData默认结果formData.default = {}; //errorText="该选项为必填项" //textWidth="15rem" //valueWidth="20rem" //textAlign="left" // left(formType:"box"默认leftdefault默认right) right center) //valueAlign="center" // left center right /> </div> <div className="button-box"> <Button scenesType="submit" handleBtn={this.submitFn} btnText="确认"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <Button scenesType="back" handleBtn={this.resetFn} btnText="重置"/> </div> </div> ) } } const mapStateToProps = state => ({ formData: state.formData, subVerifyRes: state.subVerifyRes, }); const mapDispatchToProps = dispatch => ({ dispatch: bindActionCreators(actionForm, dispatch), }); export default connect(mapStateToProps, mapDispatchToProps)(TestCheckBox);