имя опора будет неопределенным

Я использую redux-form и отправил TextField материала-ui как опору в поле redux-form. Но остальные свойства идут отлично, как и ожидалось.

<Field
    id="firstName"
    name="firstName"
    floatingLabelText="Username"
    errorText={this.state.firstNameError}
    component={TextInputField}
/>

Ниже код компонента TextInputField

import React from 'react';
import PropTypes from 'prop-types';
import TextField from 'material-ui/TextField';
import _noop from 'lodash/noop';

const TextInputField = ({
    hintText,
    id,
    name,
    className,
    defaultValue,
    floatingLabelText,
    errorText,
    onFocus,
    onChange,
    onBlur
}) => {

return (
    <TextField
        hintText={hintText}
        id={id}
        name={name}
        className={className}
        defaultValue={defaultValue}
        floatingLabelText={floatingLabelText}
        errorText={errorText}
        onFocus={onFocus}
        onChange={onChange}
        onBlur={onBlur}
    />
);
};

export default TextInputField;

Проблема здесь в том, что name prop становится неопределенным в том месте, где я использовал компонент. Я не знаю, где это происходит. Когда я утешил подпорку имени, она оказалась неопределенной.


reactjs material-ui redux-form
person Anand KS    schedule 31.01.2018    source источник
comment
Используйте оператор rest вместо того, чтобы записывать туда все аргументы. Выполните нулевую проверку с помощью тернарного оператора, а также убедитесь, что имя передается в этот компонент без состояния.   -  person Abhay Shiro    schedule 31.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Ваш TextInputField должен принимать input и meta реквизиты в соответствии с документами. input prop имеет атрибут name.

Из документов с сокращенной формой:

Свойства, предоставляемые redux-form, делятся на входные и мета-объекты.

Любые настраиваемые свойства, переданные в Field, будут объединены в объект props на том же уровне, что и входные и мета-объекты.

Вот цитата из раздела входных реквизитов:

input.name: String При вложении в FormSection возвращает свойство name с префиксом имени FormSection. В противном случае возвращает свойство имени, которое вы передали.

Итак, ваш компонент должен выглядеть так:

const TextInputField = ({
    input: { 
      name,
      onChange,
      onBlur,
      onFocus
    },
    hintText,
    id,
    className,
    defaultValue,
    floatingLabelText,
    errorText
}) => (
  <TextField
      hintText={hintText}
      id={id}
      name={name}
      className={className}
      defaultValue={defaultValue}
      floatingLabelText={floatingLabelText}
      errorText={errorText}
      onFocus={onFocus}
      onChange={onChange}
      onBlur={onBlur}
    />
);

или даже проще:

const TextInputField = ({ input, meta, ...rest }) => (
  <TextField {...input} {...rest} />
);
person user3309314    schedule 31.01.2018