Redux-form как обновить значение textField в Material-UI v4?

Question

Как обновить значение TextField (из состояния) с помощью redux-form?

Я использую версию ниже:

  "@material-ui/core": "^4.11.0"
  "redux-form": "^8.3.6"

Прежде чем использовать redux-form, я мог для обновления значения TextField из события onChange путем отправки в действие редуктора, как показано ниже:

<TextField
  id="name-id"
  label="Name"
  name="Name"
  value={props.Info.Name || ""}
  onChange={(e) => {
    props.updateTextInput({ //calling reducer
      name: e.currentTarget.name,
      value: e.currentTarget.value,
    });
  }}
/>

Теперь я хочу использовать форму redux, но не могу вводить текст в поле ввода. Я пытался добавить значение свойства, но не работал. Ниже приведен мой код редукционной формы:

const renderTextField = ({
  label,
  input,
  meta: { touched, invalid, error },
  ...custom
}) => (
    <TextField
      label={label}
      placeholder={label}
      value="test value" //try to set value, but not working
      error={touched && invalid}
      helperText={touched && error}
      {...input}
      {...custom}
    />
  );

<Field
  name="Name"
  component={renderTextField}
  label="Name"
  variant="outlined"
  fullWidth
  value={props.Info.Name || ""} //try to set value, but not working
  onChange={(e) => {
    props.userUpdateTextInput({
      name: e.currentTarget.name,
      value: e.currentTarget.value,
    });
  }}
/>

Я обнаружил, что на {...input} есть функция onChange, она будет выполнять что-то для редукционной формы, но в конце мой входной текст будет удален .

Answer 1

Что мне не хватало, так это formReducer. После добавления кода ниже все работает как положено.

import { reducer as formReducer } from 'redux-form';
export default combineReducers({
  User: userReducer,
  form: formReducer,
});