4.填写表单时添加提示小图标,友好展示填写规则 ——Tooltip

React 表单常用整理-LMLPHP

<FormItem
{...formItemLayout}
label={(
<span>
Nickname&nbsp;
<Tooltip title="What do you want other to call you?">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('nickname', {
rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
})(
<Input />
)}
</FormItem>

3.控制checkbox多选框,提交数据后情况

//措施设置保存成功后,清空选中的值

this.setState({selectedVal:[]})
onChange=(checkedValues) =>{
console.log('checked = ', checkedValues); //console.log('checked = ', e.target.value);
};
//渲染数据列方法 const redOptions = redList .map((item, idx) => ({ label: item.unitedName, value: item.unitedId, key: idx, })); //组件引入操作 <div className="cq-checkbox-div"> <CheckboxGroup className="cq-checkbox" value={this.state.selectedVal} options={redOptions} onChange={this.onChange} /> </div>

React 表单常用整理-LMLPHP

2.模态框提示消息

React 表单常用整理-LMLPHP

a.引入Model组件

b.代码操作

 Modal.success({
title:'消息提示',
content:`文件上传成功`
}); //
Modal.info({
title:'消息提示',
content:`你提交的信息存在格式错误`
}); //
Modal.warning({
title:'消息提示',
content:`操作不正确`
}); //
Modal.error({
title:'消息提示',
content:`报错啦`
});

1.获取浏览器中传递的Id值

   componentWillMount() {
this.userState.clearUser();
console.log('id', this.props.match.params.id);
} //state: async clearUser() {
this.setUsers({});
}
05-11 19:55
查看更多