antd Input.OTP 一次输如2个字符

antd 的 `Input.OPT` 组件是一个用于生成一次性密码 (One-Time Password, OTP) 输入框的组件，通常用于身份验证场景。当配置为输入两字符时，它会设计成每按一次按钮生成并显示一个新的六位数otp码的前两位，用户需要连续输入两次以完成验证。

这种设计通常是通过结合 `type="number"` 和自定义事件处理器来实现的，例如点击事件监听器会在每次触发时更新显示的部分，并限制用户只能输入两次。用户可能会看到类似这样的界面：

import { Input, Button } from 'antd';
const { OptGroup, Option } = Input;

class OTPInput extends React.Component {
  state = {
    otpA: '',
    otpB: '',
    showNextChar: false,
  };

  handleNextClick = () => {
    if (!this.state.showNextChar) {
      this.setState({ otpB: this.state.otpA, showNextChar: true });
    } else {
      // 更新状态或发送请求验证新的四位码
      this.setState(prevState => ({
        otpB: prevState.otpB + 1, // 假设每次加一
      }));
    }
  }

  render() {
    return (
      <div>
        <InputGroup>
          <InputNumber
            placeholder="请输入第一个验证码"
            value={this.state.otpA}
            onChange={(e) => this.setState({ otpA: e.target.value })}
          />
          {this.state.showNextChar && (
            <Option>
              <Button onClick={this.handleNextClick}>
                {' '}
                {' '}
              </Button>
              <InputNumber
                style={{ width: '50%' }}
                placeholder="第二个验证码将会在这里显示"
                value={this.state.otpB}
                onChange={(e) => this.setState({ otpB: e.target.value })}
              />
            </Option>
          )}
        </InputGroup>
      </div>
    );
  }
}

// 使用时...