Redux-form 如何更新 Material-UI v4 textField 值？答案

【问题标题】：Redux-form how to update Material-UI v4 textField value?Redux-form 如何更新 Material-UI v4 textField 值？
【发布时间】：2020-11-01 05:45:26
【问题描述】：

如何使用 redux-form 更新 TextField 值（从状态）？

我使用的是以下版本：

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

在我使用 redux-form 之前，我可以通过调度到 reducer 操作来更新 onChange 事件中的 TextField 值，如下所示：

<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 表单，但我无法在输入字段中输入。我尝试添加 value 属性但不工作。以下是我的 redux-form 代码：

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函数，它会对redux-form执行一些操作，但最后我的输入文本会被删除。

【问题讨论】：

标签： reactjs material-ui redux-form

【解决方案1】：

我错过的是 formReducer。添加下面的代码后，一切都按预期工作。

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

【讨论】：