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

Question

I have a simple component for rendering an 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;

And I have a form who render my input with Field component from redux-form

Like that :

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

And I can't get the values when I passed my own component, but if I remove my own component and I replace it with a input string, he works and I can get my values.

Answer 1

In your sample code, you're not passing placeholder prop. But then, you're asking about value . Assuming you're asking about how to pass value and other HTML attributes such as placeholder , the answer can be found in their 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 is part of input object, and other HTML attributes such as placeholder are at same level as input . I know it's confusing as hell and it took me a long while to wrap my head around it.

So to get the value, you would use:

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

And to pass placeholder :

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

Also, your input type is not a valid type. It should be type="text" (judging from your code). You can see a list of valid input types here .