score:-1

if you will use defaultValue props you need to convert your value to string first.

example:

const defValue = 123;

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

It works it my end.

score:-1

You can use this, it works for me :

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

score:0

Looking at your code, I assume you are not using Ant Design form.

Since it is controlled field, You need to use value prop instead of defaultValue prop. If you see empty field, your redux initial state for SETTINGS may be empty '' string..

Set your settings initial value in redux to appropriate value.

score:1

I had this problem when creating data-grid, and couldn't see the defaultValue for the first input. If you want to use uncontrolled input you can use your custom input which is controlled and set a callback function to get results like from uncontrolled input. In my case, I used onBlur action to get changed value.

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

score:1

you can either achieve you target by putting a ref to the Form

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

score:3

The correct thing is that you use fields. your code should look like.

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

you can see more examples in the documentation https://ant.design/components/form/

score:7

You may set initialValues at Form component as object.

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

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

checkout here:https://ant.design/components/form/

score:8

You may want to use value prop instead of defaultValue. The default value is used when you want to set an initial value in an uncontrolled input. Currently, you have made your Component Controlled so you may have to use value prop.

Read more about this here: https://reactjs.org/docs/forms.html#controlled-components


Related Query

More Query from same tag