输入的 defaultValue 在 ant design 上无法正常工作答案

【问题标题】：defaultValue of Input not working correctly on ant design输入的 defaultValue 在 ant design 上无法正常工作
【发布时间】：2020-07-29 08:15:57
【问题描述】：

我在我的项目中使用 ant design。我像这样使用 useEffect 从 redux 商店获取数据；

const settingsRedux = useSelector(state => state.SETTINGS)

之后我将此数据用于输入的默认值

<Input 
  defaultValue={settingsRedux.background_image} 
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

它确实有效。但给出控制台错误。

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.

【问题讨论】：

标签： reactjs redux antd use-effect

【解决方案1】：

您可能想要使用 value 属性而不是 defaultValue。当您想在不受控制的输入中设置初始值时，使用默认值。目前，您已使组件受控，因此您可能必须使用 value 属性。

在此处了解更多信息：https://reactjs.org/docs/forms.html#controlled-components

【讨论】：

是的。但是如果使用 value 而不是 defaultValue 输入在第一次打开时显示为空。
如果不查看代码，我无法真正说出为什么会发生这种情况，但它应该可以按预期工作。如果您传递了正确的值，它应该在输入中显示文本。您可以尝试为该问题创建一个 Codesandbox 链接，我可以看看

【解决方案2】：

查看您的代码，我假设您没有使用 Ant Design 表单。

由于是受控字段，所以需要使用 value prop 而不是 defaultValue prop。如果您看到空字段，则您的 SETTINGS 的 redux 初始状态可能是空的 '' 字符串..

将redux中的设置初始值设置为适当的值。

【讨论】：

【解决方案3】：

您可以将 Form 组件中的 initialValues 设置为对象。

<Form
  ...
  initialValues={{
    ["name"]: settingsRedux.background_image 
  }}
>
 ...

<Input 
  name="name"
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

在这里结帐：https://ant.design/components/form/

【讨论】：

【解决方案4】：

如果您要使用 defaultValue 道具，您需要先将您的值转换为 string。

示例：

const defValue = 123;

<Input defaultValue={defValue.toString()} />

这对我有用。

【讨论】：

【解决方案5】：

正确的做法是使用字段。你的代码应该是这样的。

<Form
  name="form_name"
  fields={[
    {
      name: ["fieldName"],
      value: settingsRedux.background_image,
    },
  ]}
>
  <Form.Item name="fieldName">
    <Input
      onChange={(e) =>
        dispatch({
          type: BACKGROUND_IMAGE,
          payload: e.target.value,
        })
      }
    />
  </Form.Item>
</Form>;

您可以在文档中查看更多示例 https://ant.design/components/form/

【讨论】：

【解决方案6】：

我在创建数据网格时遇到了这个问题，并且看不到第一个输入的 defaultValue。如果您想使用不受控制的输入，您可以使用受控制的自定义输入并设置回调函数以从不受控制的输入中获取结果。在我的例子中，我使用了 onBlur 动作来改变值。

const CusomeInput = ({ defaultValue, onInputBlur }) => {
  const [inputState, setInputState] = useState("");
  useEffect(() => {
    setInputState(defaultValue);
  }, [defaultValue]);
  return <Input value={inputState} onChange={(e) => setInputState(e.target.value)} onBlur={onInputBlur} />;
};

【讨论】：

【解决方案7】：

您可以通过在表单中添加参考来实现您的目标

const formRef = React.useRef(null)

useeffect(()=>{
formRef?.current?.setFieldsValue({
  name: fieldsToPopulate?.name,
  email: fieldsToPopulate?.email,
...
})
},[fieldsToPopulate])

return(
<Form onfinish={handleFinish ref={formRef}>
<Form.Item name="name" rules={[...]}>
<Input {...props} />
<Form.Item name="email" rules={[...]}>
<Input {...props} />
</Form.Item>
...
</Form>
)

【讨论】：