Field redux-form 中的道具组件不起作用

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 道具。但是，您问的是 value。假设你问的是如何传递 value 和其他 HTML 属性，例如 placeholder，答案可以在他们的 docs.

中找到

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

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" （根据您的代码判断）。您可以看到有效输入类型列表 here.

Field redux-form 中的道具组件不起作用

Props component in Field redux-form don't works

javascript

reactjs

redux

redux-form