使用 redux dev tools 插件调试时字段值不会改变

Question

我正在使用 redux-form 创建身份验证表单。

import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Grid from '@material-ui/core/Grid';
import TextField from '../../components/TextFieldWrapper';



const Authentication = ({
  classes,
  submitting,
  handleSubmit,
}) => (
  <div>
      <form onSubmit={handleSubmit}>
        <Grid
          container
          direction="column"
          alignContent="center"
          spacing={24}
        >
          <Grid item xs={10} md={10} lg={10}>
            <Field
              name="Email"
              type="email"
              component={TextField}
              label="Email"
            />
          </Grid>
          <Grid item xs={6}>
            <Field
              name="Password"
              type="password"
              component={TextField}
              label="Password"
            />
          </Grid>
          <Grid item xs={6}>
            <Button
              variant="contained"
              color="primary"
              type="submit"
              disabled={submitting
            >
          Login
            </Button>
          </Grid>
        </Grid>
      </form>
    </PaperWrapper>
  </div>

);

Authentication.propTypes = {
  submitting: PropTypes.bool.isRequired,
  handleSubmit: PropTypes.func.isRequired,
};

const AuthenticationForm = reduxForm({
  form: 'AuthenticationForm',
})(Authentication);



export default AuthenticationFom;

TextFieldWrapper.jsx:

import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';


const TextFieldWrapper = ({
  label,
  type,
}) => (
  <TextField
    label={label}
    margin="normal"
    type={type}
    variant="outlined"
  />
);

TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};


export default TextFieldWrapper;

当我使用 redux-devtools 调试应用程序时，我发现无论我在 TextFields 中输入什么，Field 的值都不会改变。状态是这样的：

我应该向每个字段添加 value 和 onChange 功能吗？在 Redux-form 的文档中，他们没有在 FieldComponent Material-Ui Example

中添加 value 或 onChange

Answer 1

当使用这样的自定义组件时，您需要将来自 TextFieldWrapper 的 input 属性转发到 material ui TextField。

renderTextField

的 {...input} 部分中的 Redux Form show it 文档

Answer 2

我找到了解决方案，我更新了 TextFieldWrapperComponent:

import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';


const TextFieldWrapper = ({
  label,
  type,
  input,
}) => (
  <TextField
    label={label}
    margin="normal"
    type={type}
    value={input.value}
    onChange={input.onChange}
    variant="outlined"
  />
);

TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  input: PropTypes.shape({}).isRequired,
};


export default TextFieldWrapper;

所以我将 input 属性添加到我的组件中，以便获得 redux-form 发送的道具。

使用 redux dev tools 插件调试时字段值不会改变

Field values don't change when debugging with the redux dev tools plugin

reactjs

redux

redux-form