redux default输入值在ant设计中无法正常工作

pgx2nnw8  于 2023-08-05  发布在  其他
关注(0)|答案(9)|浏览(125)

我在我的项目中使用Ant Design。我用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.

ar7v8xwq

ar7v8xwq1#

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

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

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

字符串
在这里结账:https://ant.design/components/form/

zpgglvta

zpgglvta2#

您可能希望使用value prop而不是defaultValue。当要在非受控输入中设置初始值时,使用默认值。目前,您已使组件受控,因此可能必须使用值属性。
阅读更多关于这一点在这里:https://reactjs.org/docs/forms.html#controlled-components

cwdobuhd

cwdobuhd3#

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

<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/中查看更多示例

cyej8jka

cyej8jka4#

我在创建数据网格时遇到了这个问题,无法看到第一个输入的defaultValue。如果你想使用不受控制的输入,你可以使用你的自定义输入,它是受控制的,并设置一个回调函数来获取结果,就像从不受控制的输入。在我的例子中,我使用onBlur action来获取更改的值。

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

字符串

axzmvihb

axzmvihb5#

你可以通过在表单中添加一个引用来实现你的目标

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

字符串

sf6xfgos

sf6xfgos6#

你可以用这个,它对我有用:

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

  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form form={form}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

字符串

lsmd5eda

lsmd5eda7#

查看您的代码,我假设您没有使用Ant Design表单。
由于它是受控字段,因此需要使用value prop而不是defaultValue prop。如果您看到空字段,则SETTINGS的redux初始状态可能为空''字符串。
在redux中设置你的初始值为合适的值。

wxclj1h5

wxclj1h58#

const [form] = Form.useForm();

 useEffect(() => {
 if (data && data.data) {
  form.setFieldsValue({
    estimatetitle: data.data.estimatetitle,
    invoicetitle: data.data.invoicetitle,
  });
}
}, [data, form]);

<Form
form={form}
name={"Customize"}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
//rest of form here
</Form>

字符串
在我的例子中,这工作得很好,特别是当数据在组件加载时不可用时,比如说你从某个API获取数据

b5buobof

b5buobof9#

如果你要使用defaultValue属性,你需要先将你的值转换为string
示例:
const defValue = 123;
<Input defaultValue={defValue.toString()} />
我的工作结束了。

相关问题