當組件來自從函數傳遞的狀態時，Ant設計表單驗證不起作用並且不更新輸入值

Question

從使用狀態的函數發送時無法驗證表單項。 更改選項時，“選擇”值也不會更新。

我正在使用來自 Ant 設計的組件。 如果我使用“選擇”而不是“選擇”，那么值會更新，但驗證問題沒有解決方案。

嘗試了 async-await，因為可能存在更新狀態的問題。 沒用。

這是我的代碼。

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Radio, Button, Select } from "antd";

const apiData = ["a", "b", "c"];

class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewState: []
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

  view = e => {
    if (e.target.value === "p") {
      let options = apiData.map(element => {
        return (
          <Select.Option key={element} value={element}>
            {element}
          </Select.Option>
        );
      });
      this.setState({
        viewState: (
          <Form.Item>
            {this.props.form.getFieldDecorator("brunch", {
              rules: [{ required: true, message: "Please select your brunch!" }]
            })(<Select placeholder="select brunch">{options}</Select>)}
          </Form.Item>
        )
      });
    }
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {this.props.form.getFieldDecorator("option", {
            rules: [{ required: true, message: "Please select option!" }]
          })(
            <Radio.Group onChange={this.view}>
              <Radio value="p">p</Radio>
              <Radio value="q">q</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        {this.state.viewState}
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);

ReactDOM.render(
  <WrappedNormalLoginForm />,
  document.getElementById("container")
);

Answer 1

嗨，請檢查此代碼，它工作正常。 您錯過了事件處理程序調用。

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Radio, Button, Select } from "antd";

const apiData = ["a", "b", "c"];
const { Option } = Select;

class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewState: []
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    this.setState({
      viewState: value
    });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

  view = e => {
    if (e.target.value === "p") {
      let options = apiData.map(element => {
        return (
          <Option key={element} value={element}>
            {element}
          </Option>
        );
      });
      this.setState({
        viewState: (
          <Form.Item>
            {this.props.form.getFieldDecorator("brunch", {
              rules: [{ required: true, message: "Please select your brunch!" }]
            })(
              <Select
                placeholder="select brunch"
                // onChange={(e = this.handleChange(e))}
                onChange={this.onChange}
              >
                {options}
              </Select>
            )}
          </Form.Item>
        )
      });
    }
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {this.props.form.getFieldDecorator("option", {
            rules: [{ required: true, message: "Please select option!" }]
          })(
            <Radio.Group onChange={this.view}>
              <Radio value="p">p</Radio>
              <Radio value="q">q</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        {this.state.viewState}
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);

ReactDOM.render(
  <WrappedNormalLoginForm />,
  document.getElementById("container")
);

Answer 2

我認為您需要將 initialValue 設置為空數組

    {this.props.form.getFieldDecorator("option", {
                initialValue: [],
                rules: [{ required: true, message: "Please select option!" }],
.....

Answer 3

您需要在更改時更新表單狀態。 您可以從功能更新如下。

 setFieldsValue = obj => { this.props.form.setFieldsValue({ [obj.name]: obj.value }); };

obj.name 是您的案例“選項”中的字段裝飾器的名稱。