Formik 控制按钮组减量器/增量器

Question

我想扩展一个 formik 表单框架以包含一个减量器/增量器按钮组。

https://codesandbox.io/s/currying-paper-m5572m

按钮组代码库

import React from "react";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState((state) => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState((state) => ({ counter: state.counter - 1 }));
  };
  render() {
    //const displayCounter = this.state.counter > 0;

    return (
      <ButtonGroup size="small" aria-label="small outlined button group">
        <Button onClick={this.handleDecrement}>-</Button>
        <Button disabled>{this.state.counter}</Button>
        <Button onClick={this.handleIncrement}>+</Button>
      </ButtonGroup>
    );
  }
}

export default GroupedButtons;

我需要重写这个 TextInputField 来处理这个新的组按钮控件并确保验证有效 - 就像阻止人们超过或低于最小/最大范围 - 我还想知道值本身是否应该是要更改的输入直接获取值而不是只读禁用按钮视图？

-- 当前需要更改的文本字段

import React, { Component } from 'react';

//text
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';


class TextInputField extends Component {
    constructor(props, context) {
      super(props, context);
    }

    render() {
      return (
            <TextField
              fullWidth={true}
              type={this.props.item.type}
              label={this.props.item.label}
              placeholder={this.props.item.placeholder}
              InputLabelProps={this.props.item.placeholder? {shrink: true} : {}}
              InputProps={{
                startAdornment: this.props.item.startAdornment? <InputAdornment position="start">{this.props.item.startAdornment}</InputAdornment>: null,
                endAdornment: this.props.item.endAdornment? <InputAdornment position="end">{this.props.item.endAdornment}</InputAdornment>: null
              }}
              inputProps={{
                maxLength: this.props.item.charLimit? this.props.item.charLimit:null,
                autoComplete: this.props.item.autoComplete? this.props.item.autoComplete:"off"
              }}
              rows={(this.props.item.type === "comment") ? 6 : null}
              multiline={(this.props.item.type === "comment") ? true : false}
              disabled={this.props.item.disabled}
              {...this.props.field}
              onChange={event => {
                this.props.form.setFieldValue(this.props.name, event.target.value);
                this.props.onHandle(this.props.name, event.target.value);
              }}
              error={this.props.meta.touched && (this.props.meta.error && this.props.meta.error.length > 0 ? true : false)}
            />
      )
    }
}

export default TextInputField