输入的默认值在蚂蚁设计上无法正常工作

Question

我在我的项目中使用蚂蚁设计。我使用 useEffect 从 redux store 获取数据，如下所示；

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

之后，我将此数据用于输入的 defaultValue

<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.

Answer 1

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

在这里阅读更多相关信息： https: //reactjs.org/docs/forms.html#control-components

Answer 2

正确的做法是使用字段。你的代码应该看起来像。

<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/

Answer 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/