名称道具未定义

Question

我正在使用 redux-form 并将 material-ui 的 TextField 作为 prop 发送到 redux-form 的 Field。但其他属性都如预期的那样完美。

<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 在我使用 component.I 的地方未定义，不知道这是在哪里发生的。当我安慰 name 道具时，它是未定义的。

Answer 1

根据文档，您的 TextInputField 应该接受 input 和 meta 道具。 input 道具具有 name 属性。

来自redux-form docs：

The props provided by redux-form are divided into input and meta objects.

Any custom props passed to Field will be merged into the props object on the same level as the input and meta objects.

这是一个quote from input props section:

input.name : String When nested in FormSection, returns the name prop prefixed with the FormSection name. Otherwise, returns the name prop that you passed in.

因此您的组件应如下所示：

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} />
);

名称道具未定义

name prop going as undefined

reactjs

material-ui

redux-form