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

3bygqnnd  于 2022-11-04  发布在  React
关注(0)|答案(3)|浏览(177)
  1. <Input
  2. label="Retail price"
  3. editMode
  4. name="retail_price"
  5. rules={[{ required: true, message: validationRequiredText('retail price') }]}
  6. type="number"
  7. min={1}
  8. />

在此,我如何使用name=“retail_price”更新和设置表单值?
我在谷歌上尝试了其他答案,但没有得到预期的输出。

xjreopfe

xjreopfe1#

要按名称设置值,可以使用useForm挂接:

  1. const [form] = Form.useForm();
  2. const onSubmit = () => {
  3. form.setFieldsValue({ retail_price: 'Hi, man!' });
  4. }
  5. <Button type="primary" onClick={onSubmit}>submit example</Button>
  6. <Form form={form}>
  7. <Form.Item name="retail_price" label="Retail price" rules={[{ required: true, message: validationRequiredText('retail price') }]}>
  8. <Input editMode type="number" min={1} />
  9. </Form.Item>
  10. </Form>
s71maibg

s71maibg2#

现代浏览器支持本机querySelectorAll,因此您可以执行以下操作:
“零售价格”是一个很重要的概念。
希望这对你有帮助。

r1zhe5dt

r1zhe5dt3#

你可以使用react-hook-form库来管理输入的值。这里是officical documention

  1. import React from "react";
  2. import { useForm } from "react-hook-form";
  3. export default function FormValidation() {
  4. const {
  5. register,
  6. handleSubmit
  7. } = useForm();
  8. const onSubmit = (data) => {
  9. console.log(data);
  10. };
  11. return (
  12. <div>
  13. <form
  14. onSubmit={handleSubmit(onSubmit)}
  15. >
  16. <Input
  17. placeholder="Retail price"
  18. type="text"
  19. {...register("retail_price"}
  20. />
  21. <Button type="submit">Submit</Button>
  22. </form>
  23. </div>
  24. );
  25. }
展开查看全部

相关问题