如何使用名称属性更新表单输入字段答案

【问题标题】：How to update the form input field with a name attribute如何使用名称属性更新表单输入字段
【发布时间】：2022-11-02 21:30:48
【问题描述】：

<Input
   label="Retail price"
   editMode
   name="retail_price"
   rules={[{ required: true, message: validationRequiredText('retail price') }]}
   type="number"
   min={1}
/>

在此如何使用 name="retail_price" 更新和设置表单值？

我在谷歌上尝试了其他答案，但没有得到预期的输出。

【问题讨论】：

标签： reactjs antd react-forms

【解决方案1】：

要按名称设置值，您可以使用 useForm 挂钩：

const [form] = Form.useForm();
    
const onSubmit = () => {
  form.setFieldsValue({ retail_price: 'Hi, man!' });
}

<Button type="primary" onClick={onSubmit}>submit example</Button>

<Form form={form}>
  <Form.Item name="retail_price" label="Retail price" rules={[{ required: true, message: validationRequiredText('retail price') }]}>
    <Input editMode type="number" min={1} />
  </Form.Item>
</Form>

【讨论】：

【解决方案2】：

现代浏览器支持本机 querySelectorAll，因此您可以：

document.querySelectorAll('[name="retail_price"]');

希望这可以帮助。

【讨论】：

最好是不是在 React 中使用 document API。
谢谢。我没有注意到这个问题在 React 中被标记了。

【解决方案3】：

您可以使用 react-hook-form 库来管理输入的值。这是官方的documention

import React from "react";
import { useForm } from "react-hook-form";

export default function FormValidation() {
  const {
    register,
    handleSubmit
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <form
        onSubmit={handleSubmit(onSubmit)}
      >
          <Input
            placeholder="Retail price"
            type="text"
            {...register("retail_price"}
          />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

【讨论】：

在我看来，除非需要，否则我不会安装另一个依赖项。 Ant design 有一种“本机”方法来处理这种操作。