手动更新 Form.Item 值

Question

我需要手动更新 Form.Item 的值。我有一个自定义组件，其中 returns 选择了值，并希望将此值传递给 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 是我设法从组件中提取值的方法。

Answer 1

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

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),
    });
   }

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

手动更新 Form.Item 值

Manually updating Form.Item value

javascript

typescript

reactjs

antd