如何使用控制器实现输入类型编号（使用 redux 形式）

Question

我正在使用由 redux 表单包裹的控制器 (-/+) 处理输入数字：

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

我不知道如何让它工作并使用控制器更新我的值。现在它只适用于输入内的 onChange。

我的控制器可以接收一些外部函数来更新值，但我不知道如何。当然，我不是redux和redux形式的忍者。

有什么想法吗？

谢谢

Answer 1

您是否尝试过自定义组件中的 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