Reactjs 如何为表单动态设置所需的规则。项验证

我有一个可以检查或不检查的参数列表。其对应字段根据复选框状态启用/禁用。所以，若参数被选中，我想启用和验证字段，若复选框被取消选中，则禁用字段并关闭验证规则。 但在切换复选框时，我无法将

必需

规则切换为

错误

如您所见，

registrations

参数未选中，但字段仍有验证

我是这样做的：

<Row key={index} gutter={8}>
  <Col span={6} offset={4}>
    <Form.Item help="">
      <Checkbox
        checked={attribute.isActive}
        disabled={isViewMode}
        onChange={this.handleChangeAttributeActive(attribute.eventId)}
        value={attribute.name}
      >
        {attribute.name}
      </Checkbox>
    </Form.Item>
  </Col>
  <Col span={8}>
    <Form.Item help="">
      {getFieldDecorator(`${attribute.name}`, {
        initialValue: attribute.attributeSendName,
        rules: [{ required: attribute.isActive }],
      })(
        <Input
          disabled={isViewMode || !attribute.isActive}
        />
      )}
    </Form.Item>
  </Col>
</Row>

{attribute.name}
{getFieldDecorator（`${attribute.name}`{
initialValue:attribute.attributeSendName，
规则：[{required:attribute.isActive}]，
})(
)}

属性

是存储在组件状态中的参数数组。 复选框处理程序只需切换到相反的

isActive

属性

你能帮忙吗？谢谢

validateFields（）

接受两个参数。您应该提供

{force:true}

作为第二个参数来正确验证字段

handleChangeAttributeActive = e => {
    this.setState(
      prevState => ({
        ...prevState,
        attribute: { ...prevState.attribute, isActive: e.target.checked }
      }),
      () => {
        this.props.form.validateFields([e.target.value], { force: true });
      }
    );
  };

验证指定的字段并获取其值 和错误。如果不指定字段名的参数，则将 验证所有字段

从“antd”导入{Row，Col，Checkbox，Form，Input}；
类应用程序扩展组件{
状态={
属性：{
姓名：“姓名”，
是的，
事件编号：1，
attributeSendName：“输入您的姓名”
},
isViewMode:false
};
handleChangeAttributeActive=e=>{
这是我的国家(
prevState=>({
…国家，
属性：{…prevState.attribute，isActive:e.target.checked}
}),
() => {
this.props.form.validateFields（[e.target.value]，{force:true}）；
}
);
};
render（）{
const{getFieldDecorator}=this.props.form；
const{attribute，isViewMode}=this.state；
常数指数=0；
返回(
{attribute.name}
{getFieldDecorator（`${attribute.name}`{
消息：attribute.attributeSendName，
规则：[{必需：attribute.isActive}]
})()}
);
}
}
const WrappedApp=Form.create（）（应用程序）；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

根据需要更改此代码

import { Row, Col, Checkbox, Form, Input } from "antd";

class App extends Component {
  state = {
    attribute: {
      name: "name",
      isActive: true,
      eventId: 1,
      attributeSendName: "enter your name"
    },
    isViewMode: false
  };

  handleChangeAttributeActive = e => {
    this.setState(
      prevState => ({
        ...prevState,
        attribute: { ...prevState.attribute, isActive: e.target.checked }
      }),
      () => {
        this.props.form.validateFields([e.target.value], { force: true });
      }
    );
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { attribute, isViewMode } = this.state;
    const index = 0;
    return (
      <div className="App">
        <Row key={index} gutter={8}>
          <Col span={6} offset={4}>
            <Form.Item help="">
              <Checkbox
                checked={attribute.isActive}
                disabled={isViewMode}
                onChange={this.handleChangeAttributeActive}
                value={attribute.name}
              >
                {attribute.name}
              </Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item help="">
              {getFieldDecorator(`${attribute.name}`, {
                message: attribute.attributeSendName,
                rules: [{ required: attribute.isActive }]
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
      </div>
    );
  }
}

const WrappedApp = Form.create()(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<WrappedApp />, rootElement);