defaultValue of Input неправильно работает с муравьиным дизайном

Я использую дизайн муравья в своем проекте. Я получаю данные из хранилища избыточности с помощью useEffect следующим образом;

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

после этого я использую эти данные для defaultValue of Input

<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 use-effect antd
person MehmetDemiray    schedule 16.04.2020    source источник

Ответы (6)


arrow_upward
4
arrow_downward

Вы можете использовать value вместо defaultValue. Значение по умолчанию используется, когда вы хотите установить начальное значение для неуправляемого входа. В настоящее время вы сделали свой компонент контролируемым, поэтому вам, возможно, придется использовать значение.

Подробнее об этом читайте здесь: https://reactjs.org/docs/forms.html#controller-components

person Yash Joshi    schedule 16.04.2020
comment
Да. Но если использовать значение вместо значения по умолчанию, при первом открытии отображается пустое значение. - person MehmetDemiray; 16.04.2020
comment
Я не могу сказать, почему это может происходить, не глядя на код, но он должен работать так, как ожидалось. Если вы передадите правильное значение, он должен был показать текст на входе. Вы можете попробовать создать ссылку Codesandbox для проблемы, я могу посмотреть - person Yash Joshi; 16.04.2020
comment
Хорошо объяснил, и это сработало. - person lordvador; 26.02.2021

arrow_upward
3
arrow_downward

Вы можете установить начальные значения в компоненте формы как объект.

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

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

оформить заказ здесь:https://ant.design/components/form/

person Joy    schedule 17.04.2020

arrow_upward
1
arrow_downward

Правильно то, что вы используете поля. ваш код должен выглядеть так.

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

person Cesar Barros    schedule 08.03.2021

arrow_upward
0
arrow_downward

Глядя на ваш код, я предполагаю, что вы не используете форму Ant Design.

Поскольку это контролируемое поле, вам нужно использовать значение свойства вместо значения по умолчанию. Если вы видите пустое поле, ваше начальное состояние редукции для НАСТРОЙКИ может быть пустой строкой.

Установите начальное значение ваших настроек в редуксе на соответствующее значение.

person Hemanthvrm    schedule 16.04.2020

arrow_upward
0
arrow_downward

если вы будете использовать реквизит defaultValue, вам нужно сначала преобразовать значение в string.

пример:

const defValue = 123;

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

Это работает мой конец.

person deni rahma    schedule 11.09.2020

arrow_upward
0
arrow_downward

У меня была эта проблема при создании сетки данных, и я не мог видеть значение по умолчанию для первого ввода. Если вы хотите использовать неконтролируемый ввод, вы можете использовать свой настраиваемый ввод, который контролируется, и установить функцию обратного вызова, чтобы получить результаты, подобные неконтролируемому вводу. В моем случае я использовал действие 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} />;
};
person Yauhen Hloba    schedule 01.06.2021