Как реализовать ввод типа номера с контроллерами (с редуксной формой) - PullRequest
Новая
       5

Как реализовать ввод типа номера с контроллерами (с редуксной формой)

0 голосов
/ 26 сентября 2018

Я работаю над вводом номера с контроллерами (- / +), обернутыми в редуцированную форму:

https://codesandbox.io/s/8l3qjxv2l9

Я не знаю, как заставить это работать и обновлятьмое значение с контроллерами.Теперь он работает только с onChange внутри ввода.

Мои контроллеры могут получать некоторые внешние функции для обновления значения, но я не знаю как.Конечно, я не ниндзя с избыточной и избыточной формой.

Есть идеи?

Спасибо

1 Ответ

0 голосов
/ 26 сентября 2018

Вы пробовали onChange в своем пользовательском компоненте?Взгляните на de api https://redux -form.com / 6.6.3 / docs / api / field.md / , когда они говорят «Чтобы узнать, какие реквизиты будут переданы вашему компоненту, см.Раздел реквизита ниже. "

import React, { Component } from "react";
import PropTypes from "prop-types";

class NumberInput extends Component {
  static propTypes = {
    input: PropTypes.any,
    onChange: PropTypes.func,
    min: PropTypes.number.isRequired,
    max: PropTypes.number.isRequired,
    label: PropTypes.string,
    errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
  };

  static defaultProps = {
    onDecrement: null,
    onIncrement: null,
    onChange: null,
    errorMessage: false
  };

  render() {
    const {
      input,
      onChange,
      value,
      min,
      max,
      label,
      errorMessage
    } = this.props;
    let val = value || min;
    // MAIN
    return (
      <div className="number-input__content">
        <div>
          <button
            type="button"
            onClick={() => onChange(val > min && value - 1)}
          >
            -
          </button>
          <input
            type="number"
            pattern="[0-9]"
            defaultValue={min}
            value={val}
            min={min}
            max={max}
            onChange={onChange}
            {...input}
          />
          <button
            type="button"
            onClick={() => onChange(val < max && value + 1)}
          >
            +
          </button>
        </div>
      </div>
    );
  }
}

export default NumberInput;

https://codesandbox.io/s/j2zy4ynp8w

...