如何通过name="retail_price"更新并设置表单Input字段的值？

解答 #

从组件的name、rules等属性判断，这应该是Ant Design框架的Form Input组件，要通过指定字段名更新表单值，核心是借助Form实例的setFieldsValue方法，以下是不同场景的具体实现：

函数组件（React Hooks）

1. 先通过useForm钩子获取表单实例，再调用setFieldsValue更新指定字段：

import { Form, Input } from 'antd';
// 引入你的验证文本函数
import validationRequiredText from './path-to-validation-function';

const ProductForm = () => {
  // 获取表单实例
  const [form] = Form.useForm();

  // 示例：触发更新的函数（可绑定到按钮点击、接口回调等业务场景）
  const updateRetailPrice = () => {
    // 传入键值对，key对应Input的name属性
    form.setFieldsValue({
      retail_price: 129 // 设置你需要的数值
    });
  };

  return (
    <Form form={form}>
      <Input
        label="零售价"
        editMode
        name="retail_price"
        rules={[{ required: true, message: validationRequiredText('零售价') }]}
        type="number"
        min={1}
      />
      <button onClick={updateRetailPrice}>更新零售价</button>
    </Form>
  );
};

类组件

如果是类组件，通过Form.create()包装组件后，从props中获取表单实例：

import { Form, Input } from 'antd';
import validationRequiredText from './path-to-validation-function';

class ProductForm extends React.Component {
  updateRetailPrice = () => {
    this.props.form.setFieldsValue({
      retail_price: 129
    });
  };

  render() {
    return (
      <Form form={this.props.form}>
        <Input
          label="零售价"
          editMode
          name="retail_price"
          rules={[{ required: true, message: validationRequiredText('零售价') }]}
          type="number"
          min={1}
        />
        <button onClick={this.updateRetailPrice}>更新零售价</button>
      </Form>
    );
  }
}

// 用Form.create包装组件以获取表单实例
export default Form.create()(ProductForm);

关键提示

• setFieldsValue支持批量更新多个字段，只需在传入的对象中添加更多键值对即可
• 必须确保Input组件嵌套在Form组件内部，且Form实例已正确关联（函数组件通过form属性传递，类组件通过Form.create包装）
• 如果是初始化时设置值，也可以直接在Form.Item上配置initialValue属性，但这不属于动态更新范畴

内容的提问来源于stack exchange，提问作者rasif sahl