Antd 入门实战：攻略表单难题，动态修改 Input 值

2023-07-02 02:39:16

Ant Design 入门实战：攻略表单难题，动态修改 Input 值

深入浅出，轻松搞懂 Ant Design 表单

在 React 生态圈中，Ant Design 以其简洁、现代的设计和丰富的组件而备受追捧。作为 Ant Design 中必不可少的一员，表单凭借强大的 API，帮助我们轻而易举地构建各种复杂表单。

表单中，Input 框扮演着极其重要的角色，它允许用户输入文本信息。然而，在某些场景下，我们需要动态修改 Input 框的值，以便根据用户的操作实时更新表单数据。对于很多初学者来说，这却成了一个拦路虎：直接操作 value 却发现毫无作用。

问题根源：受控组件与非受控组件

在 React 中，表单元素分为受控组件和非受控组件。受控组件是由 React 状态控制其值的元素，而非受控组件则由其自身的内部状态控制其值。

Ant Design 中的 Input 框默认是非受控组件，这意味着直接操作其 value 不会触发任何状态更新，也就无法动态修改其值。

解决方案：使用 form.setFieldsValue

为了动态修改 Input 框的值，我们需要将其转换为受控组件。在 Ant Design 中，我们可以借助 form.setFieldsValue 方法来实现这一目标。

form.setFieldsValue 方法可以更新表单中所有字段的值。在调用该方法时，我们只需要传入一个对象，其中包含要更新的字段名称及其对应的新值。

以下代码演示了如何使用 form.setFieldsValue 动态修改 Input 框的值：

import { Form, Input } from 'antd';

const App = () => {
  const [form] = Form.useForm();

  const handleChange = (e) => {
    form.setFieldsValue({
      username: e.target.value,
    });
  };

  return (
    <Form form={form}>
      <Input name="username" onChange={handleChange} />
    </Form>
  );
};

export default App;