Question

我使用的是redux-form，我发送了材料-ui的TextField作为propx的字段。但其他房产完全符合预期。

<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;

这里的问题是名称prop在我使用组件的地方未定义。我不知道这发生了什么。当我安慰这个名字时，它就是未定义的。

Answer 1

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

来自redux-form docs：

redux-form提供的道具分为输入和元   对象。

传递给Field的任何自定义道具都将合并到props对象中   与输入和元对象处于同一级别。

这是quote from input props section：

input.name：String当嵌套在FormSection中时，返回名称prop 以FormSection名称为前缀。否则，返回名称prop 你传过来了。

所以你的组件应该是这样的：

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

名称道具未定义

1 个答案: