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

Question

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

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

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

有什么想法吗？

谢谢

Answer 1

你试过自定义组件中的onChange吗？看看deapihttps://redux-form.com/6.6.3/docs/api/field.md/他们说话的时候"To learn what props will be passed to your component, see the Props section below."

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

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

How to implement an input type number with controllers (with redux form)

reactjs

redux

redux-form