React 表单常用整理

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

<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>

2.模态框提示消息

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({});

  }

巴特西

React 表单常用整理

最新文章

热门文章