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;

我有一个表单，该表单使用Field的{{1}}组件来呈现我的输入

喜欢：

redux-form

当我传递自己的组件时，我无法获取值，但是，如果我删除了自己的组件，并用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);字符串替换了它，他就会工作，并且我可以获取我的值。

Answer 1

在示例代码中，您没有通过placeholder属性。但随后，您正在询问value。假设您要询问如何传递value和其他HTML属性（例如placeholder），答案可以在其docs中找到。

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

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表单中的道具组件不起作用

1 个答案: