Компонент реквизита в поле приставки не работает - PullRequest
Новая
       8

Компонент реквизита в поле приставки не работает

0 голосов
/ 02 октября 2018

У меня есть простой компонент для рендеринга 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 компонентом из 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);

И я не могу получить значения, когда передал свой собственный компонент, но если я удаляю свой собственный компонент и заменяю его строкой input, он работает, и я могу получить свои значения.

1 Ответ

0 голосов
/ 02 октября 2018

В вашем примере кода вы не передаете placeholder prop.Но тогда вы спрашиваете о value.Предполагая, что вы спрашиваете о том, как передать value и другие атрибуты HTML, такие как placeholder, ответ можно найти в их документах .

Любые пропущенные пользовательские реквизитыПоле будет объединено с объектом 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" (судя по вашему коду).Вы можете увидеть список допустимых типов ввода здесь .

...