react-form-ui-y
Version:
149 lines (132 loc) • 6.9 kB
Plain Text
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"默认left,default默认right) right center(无)
//valueAlign="center" // left center right
/>
</div>
<div className="button-box">
<Button scenesType="submit" handleBtn={this.submitFn} btnText="确认"/>
<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);