Значения полей не меняются при отладке с помощью плагина инструментов redux dev - PullRequest
Новая
       1

Значения полей не меняются при отладке с помощью плагина инструментов redux dev

0 голосов
/ 18 марта 2019

Я использую избыточную форму для создания формы аутентификации. 

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. Состояние таково: Redux State

Должен ли я добавить функции value и onChange к каждому полю. В документации Redux-формы они не добавляют value или onChange в свой FieldComponent Material-Ui Пример

Ответы [ 2 ]

1 голос
/ 18 марта 2019

При использовании таких пользовательских компонентов вам необходимо переслать в текстовый интерфейс материала свойство input, полученное из TextFieldWrapper.

В документе Redux Form показать его в детали{...input} из renderTextField

0 голосов
/ 18 марта 2019

Я нашел решение, я обновляю 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-формы.

...