手动更新 Form.Item 值答案

【问题标题】：Manually updating Form.Item value手动更新 Form.Item 值
【发布时间】：2021-11-04 03:27:50
【问题描述】：

我需要手动更新Form.Item 的值。我有一个自定义组件，它返回选定的值，并希望将此值传递给Form 进行验证，以便我可以发送它。

antd 可以做到这一点吗？

这是简化的代码：

import { Form } from "antd";
import { FC, ReactElement, useEffect, useState } from "react";

const Child: FC<{
  returnValue: (value: any) => void;
}> = ({ returnValue }): ReactElement => {
  return <input onChange={(e) => returnValue(e.currentTarget.value)} />;
};

export default function App() {
  const { useForm } = Form;
  const [form] = useForm();

  const [value, setValue] = useState<string>("");

  const setNewValue = (newVal: string) => setValue(newVal);

  useEffect(() => {
    console.log(value);
  }, [value]);

  return (
    <div className="App">
      test
      <Form form={form}>
        <Form.Item
          //value={value} I'm looking form smth like this
        >
          <Child returnValue={setNewValue} />
        </Form.Item>
      </Form>
    </div>
  );
}

而here 是代码沙箱。

在我的情况下，使用 antd 中的 <Input> 将不起作用。这是一个简化的问题。我有一个更复杂的组件，它的行为方式类似。 returnValue 是我设法从组件中提取值的方法。

【问题讨论】：

你已经在App组件的状态“值”中保存了值。如果你想检查状态“值”的变化，你可以使用 useEffect 钩子： useEffect(() => { console.log(value) }, [value]);仅在更改“值”时执行您还可以使用 ant 设计表单的 getFieldsValue({}) 或 getFieldValue() 属性获取表单项的所有值。 ant.design/components/form/#FormInstance
是的。问题是，我看不到将值实际分配给Form.Item 的值的方法。我错过了什么吗？
Form.Item 没有“值”属性，您可以在此处查看 Form.Item 的属性ant.design/components/form/#Form.Item
您可以使用 FormInstance 的 setFieldsValue({}) 函数来设置 Form.Item ant.design/components/form/#FormInstance的值
就是这样。谢谢！

标签： javascript reactjs typescript antd

【解决方案1】：

对于基于类的组件，这是定义表单的方式

class CustomForm extends React.Component {
  formRef = React.createRef();
  constructor()
    render(){
      return(
        <Form 
          ref={this.formRef} 
          name="customForm"
        >
          <Form.Item label="Email" name="email">
            <Input />
          </Form.Item>
        </Form>
      )} 
}

这就是你设置 form.items 值的方式

componentDidUpdate(){
    this.formRef.current.setFieldsValue({
       email: this.props.customerData.map((d) => d.email),
    });
   }

您可以转换功能组件的逻辑。

【讨论】：

这是缺失的部分。谢谢！