React项目学习总结（一）表单部分

1、
通过models中的proList.js中的state获取到apiList
再通过ProjectList.js view视图层中获取

const { proList: { apiList }, form: { getFieldDecorator, setFieldsValue }, } = props;

// 获取apilist数据
 const getData = async () => {
   await dispatch({
     type: 'proList/getApiList'
   });
 };

 // 获取接口列表
 useEffect(() => {
   getData();
 }, []);

<Form.Item label="服务">
            {getFieldDecorator('api_id')(
              <Checkbox.Group style={{ width: '100%' }}>
                <Row>
                  {
                    Array.isArray(apiList) && apiList.length > 1
                      ? (
                        apiList.map((item, index) => (
                          <Col span={12} key={index} style={{ marginTop: 10 }}>
                            <Checkbox value={item.id}>{item.api_name}</Checkbox>
                          </Col>
                        ))
                      )
                      : null
                  }

                </Row>
              </Checkbox.Group>,
            )}
          </Form.Item>

2、设置input框必填、校验正则

// 检测新密码是否输入正确
  const checkPassword = (rule, value, callback) => {
    if (value === props.form.getFieldValue("show_pass")) {
      callback('当前密码与原密码相同');
    }
    if (!value) {
      // setHelp(formatMessage({ id: 'validation.password.required' }));
      setVisible(!!value);
      callback('请输入密码！');
    } else {
      // setHelp('');
      if (!visible) {
        setVisible(!!value);
      }
      const regu = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}$/;
      const re = new RegExp(regu);
      console.log(value.length);
      if (value.length < 6) {
        callback("请输入6位以上的字符")
      } else if (value.length > 16) {
        callback('当前密码长度超过限制');
      } else {
        const { form } = props;
        if (value && confirmDirty) {
          form.validateFields(['confirm2'], { force: true });
        }
        callback();
      }
    }
  };

<Form.Item label="名称">
            {getFieldDecorator('product_name', {
              rules: [{
                required: true,   //必填
                message: '请输入名称',  //不填提交时提示内容
            },{
                validator: checkPassword,  //如果校验密码
            }],
                initialValue: dataSource && dataSource.email,   // 设置初始值
                pattern: /(^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$)/, //正则校验是否正确
              initialValue: messageTxt[0].product_name
            })(<Input placeholder="请输入名称" />)}
          </Form.Item>

3、提交表单校验

props.form.validateFields(async (err, values) => {
      if(err) return;    //如果校验不通过，直接返回
      if (!err) {
        if (values.api_id) {
          values.api_id = values.api_id.join(',');
        }
        setIsFetch(false);
        await dispatch({
          type: "proList/addProject",
          payload: values, ...{ status: 1 }
        });
        // 创建成功
        setIsFetch(true)
      }
    });

4、重置表单信息：

props.form.resetFields();  // 不给参数重置全部

5、点击弹出模态框：

// 禁用
  const onDisable = (e) => {
    // const { product_name, id } = e;
    const text = e.is_forbidden === 1 ? '解禁' : '禁用';
    Modal.confirm({
      centered: true,
      title: `${text}提示`,
      content: `是否${text} ${e.product_name}`,
      cancelText: '取消',
      okText: '确定',
      loading: true,
      onOk: async () => {
        message.loading(`${text}中...`);
        await dispatch({
          type: 'proList/disableOrUnDisable',
          payload: { id: e.id }
        });
        getData();
      }
    });
  };