Field Redux表单中的道具组件不起作用

Question

我有一个用于呈现input的简单组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TextInput extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const { placeholder } = this.props;
    return (
      <div>
        <input
          type="input"
          placeholder={placeholder}
        />
      </div>
    );
  }
}

TextInput.propTypes = {
  meta: PropTypes.shape({}),
  placeholder: PropTypes.string
};

export default TextInput;

我有一个表单，该表单使用redux-form Field组件呈现输入

像那样 ：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Field,
  reduxForm
} from 'redux-form';

import TextInput from '../../Fields/TextInput/index';

import {
  USERNAME_NAME_FIELD,
  PASSWORD_NAME_FIELD
} from '../../../constants/strings';

class LoginPage extends Component {
  constructor(props) {
    super(props);

    this.state = {};

    this.showResults = this.showResults.bind(this);
  }

  showResults(values) {
    console.log(this);
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="loginPage">
        <form onSubmit={handleSubmit(this.showResults)} className="loginPage__form">
          <div className="loginPage__form__fields">
            <Field
              name={USERNAME_NAME_FIELD}
              type="text"
              component={TextInput}
              label={USERNAME_NAME_FIELD}
            />
          </div>
          <div className="loginPage__form__fields">
            <Field
              name={PASSWORD_NAME_FIELD}
              type="text"
              component={TextInput}
              label={USERNAME_NAME_FIELD}
            />
          </div>
          <div className="loginPage__form__fields">
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    );
  }
}

LoginPage.propTypes = {
  values: PropTypes.shape({}),
  handleSubmit: PropTypes.func
};


export default reduxForm({
  form: 'loginPage' // a unique identifier for this form
})(LoginPage);

而且，当我传递自己的组件时，我无法获取值，但是如果删除自己的组件，并用input字符串替换它，则他可以工作，并且我可以获取值。

Answer 1

在示例代码中，您没有传递placeholder prop。 但是，那是您在询问value 。 假设您要询问如何传递value和其他HTML属性（如placeholder ，答案可以在他们的文档中找到。

传递给Field的所有自定义道具都将在与输入和元对象相同的级别上合并到道具对象中。

value是input对象的一部分，其他HTML属性（如placeholder与input处于同一级别。 我知道这真是令人迷惑，我花了很长时间才把头缠住它。

因此，要获得价值，您可以使用：

const { placeholder, input: { value } } = this.props;

并通过placeholder ：

<Field
  name={USERNAME_NAME_FIELD}
  type="text"
  component={TextInput}
  label={USERNAME_NAME_FIELD}
  placeholder="some placeholder text"
/>

另外，您的输入type也不是有效的类型。 它应该是type="text" （根据您的代码判断）。 您可以在此处看到有效输入类型的列表。