AntD中如何自定义Form Field的值？

Question

我正在使用 Ant Design 处理 Form.Item，一切正常，但是我想像下面的代码示例一样自定义 Form.Item 的值：

  const onFinish = (values) => {
    console.log('Values received:', values);

    /* 

      Normally we would get the result like:
      {
        email: 'abc@gmail.com'
      } 

      ===================================================

      But as expected, when user input an email 
      i want to get the result directly with object format like this:
      {
        email: { email: 'abc@gmail.com', rule: 'user' }
      }           

    */
  };

  return (
    <Form
      name="user_information"
      onFinish={onFinish}
    >
      <Form.Item
        label="Email"
        name="email"
        rules={[
          {
            required: true,
            message: 'Your email cannot be empty!',
          },
        ]}
      >
        <Input placeholder="Enter your email" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Update now
        </Button>
      </Form.Item>
    </Form>
  );

我尝试向 <Input /> 组件提供 value 属性，但它不起作用。那么我需要提供什么给Form.Item或者Input来解决上面的问题呢？

谢谢！

Answer 1

Antd Form 在以对象的形式提交所有表单控件输入的表单时为我们提供了 values，其中键是表单控件输入的名称，值是给定的值由用户。

我所知道的最佳做法是，在手动提交表单之前，我们不应该更改输入值，否则我们的表单可能会显示我们无法弄清楚的意外行为。

但是，如果您想要使用与表单值略有不同的数据负载执行 post 请求，那么您可以在提交请求之前修改表单数据。


const [formValues, setFormValues] = useState()

const onFinish = (values) => {
  console.log("Values received:", values);

  // modify the form value here 
  // remember don't change `values`, preserve the form value in some other variable or state.
  const keys = Object.keys(changedValues);
  
  let newValues = { [keys[0]]: { [keys[0]]: changedValues[keys[0]]} }
  
  console.log(newValues);

};


return (
  <Form name="user_information" onFinish={onFinish}>
    <Form.Item
      label="Email"
      name="email"
      rules={[
        {
          required: true,
          message: "Your email cannot be empty!",
        },
      ]}
    >
      <Input placeholder="Enter your email" />
    </Form.Item>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Update now
      </Button>
    </Form.Item>
  </Form>
);

AntD中如何自定义Form Field的值？

How to custom value of Form Field in AntD?

reactjs

antd