时间戳

首页 > 解决方案 > 如何使用控制器实现输入类型编号（使用 redux 形式）

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

问题描述

我正在处理带有由 redux 表单包裹的控制器（-/+）的输入数字：

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

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

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

有任何想法吗？

谢谢

标签： reactjsreduxredux-form

解决方案

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

推荐阅读