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" （根據您的代碼判斷）。 您可以在此處看到有效輸入類型的列表。