React实现车牌号输入

在实际工作过程中需要这样的需求，下面我将把实现的过程记录下来
简述一下我的方法：按照车牌号的位数，渲染出相同个数的input输入框，每个输入框接收特定的值，通过ref（DOM）对每个输入框进行操作。

程序截图

首先是将静态界面搭建起来

第一步是渲染键盘主体内容

车牌号是由省份缩写汉字和大写字母以及数字组成，所以键盘应该有两种类别；

// 最终显示的键盘
board: [],
// 字母数字键盘
mix_board: [
	["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
	["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
	["A", "S", "D", "F", "G", "H", "J", "K", "L"],
	["返回", "Z", "X", "C", "V", "B", "N", "M", "删除"],
],
// 省份缩写键盘
provice_board: [
    ["京", "沪", "粤", "津", "冀", "晋", "蒙", "辽", "吉", "黑"],
    ["苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "桂"],
    ["琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁"],
    ["ABC", "新", "使", "领", "警", "学", "港", "澳", "删除"],
  ],

定义两个状态来表示不同种类的键盘，以便进行键盘类别的切换

  /**
   * @param type 键盘类型
   * 确定需要展现的键盘
   */
  selectBoard = (type) => {
    if (type === "provice") this.setState({ board: this.state.provice_board });
    if (type === "mix") this.setState({ board: this.state.mix_board });
  };
    componentWillMount() {
    // 默认省份缩写键盘
    this.selectBoard("provice");
  }
// 创建键盘布局
  createBoard = () => {
    let funName = ["清空", "退格", "ABC", "删除", "返回"];
    return (
      <div className="boardMain">
        {this.state.board.map((item, index) => {
          return (
            <div className="keyboard_content" key={index}>
              {item.map((item_key, index_key) => {
                return (
                  <Col key={"col_" + item_key + index_key}>
                    {
                      <Button
                        type="primary"
                        size="large"
                        className={
                          funName.includes(item_key) ? "mix mix_fun" : "mix"
                        }
                        value={item_key}
                        onClick={() => {
                        	//键盘按钮点击事件
                        }}
                      >
                        {item_key}
                      </Button>
                    }
                  </Col>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  };

将有特殊功能，特定样式的按钮，首先做上标记，在渲染的过程中赋予它们特定的CSS样式

第二步是渲染输入框

 //  创建输入框布局
  createInput = () => {
    return (
      <div className="inputMain">
        <div className="region">
          <input
            className="word number_item"
            ref={this.number_region_word}
            onFocus={() => {
              this.setState({ currentInput: this.number_region_word.current });
            }}
            onChange={(val) => {
              console.log(val);
            }}
          />
          <input
            className="letter number_item"
            ref={this.number_region_letter}
            onFocus={() => {
              this.setState({
                currentInput: this.number_region_letter.current,
              });
            }}
          />
        </div>
        <div className="circle"></div>
        <div className="number">
          <input
            className="number_item"
            ref={this.number_item_1}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_1.current,
              });
            }}
          />
          <input
            className="number_item"
            ref={this.number_item_2}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_2.current,
              });
            }}
          />
          <input
            className="number_item"
            ref={this.number_item_3}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_3.current,
              });
            }}
          />
          <input
            className="number_item"
            ref={this.number_item_4}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_4.current,
              });
            }}
          />
          <input
            className="number_item"
            ref={this.number_item_5}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_5.current,
              });
            }}
          />
        </div>
        <div
          className="elecCar"
          style={{ display: this.state.existNew ? "" : "none" }}
        >
          <input
            className="number_item"
            ref={this.number_item_6}
            onFocus={() => {
              this.setState({
                currentInput: this.number_item_6.current,
              });
            }}
          />
        </div>
      </div>
    );
  };

并获取它们所有的ref

 componentDidMount() {
    // 首次加载完成之后焦点默认在第一个输入框内
    this.number_region_word.current.focus();
    this.state.carNumberArray = [
      this.number_region_word.current,
      this.number_region_letter.current,
      this.number_item_1.current,
      this.number_item_2.current,
      this.number_item_3.current,
      this.number_item_4.current,
      this.number_item_5.current,
      this.number_item_6.current,
    ];
  }

主要方法

①键盘按钮点击事件

 // 键盘按键点击事件
  clickKey = (boardKey) => {
    if (boardKey === "返回") {
      this.selectBoard("provice");
    } else if (boardKey === "ABC") {
      this.selectBoard("mix");
    } else if (boardKey === "删除") {
      if (this.number_region_letter.current.value === "")
        this.selectBoard("provice");
      this.state.currentInput.value = "";
      if (this.number_region_word.current.value)
        this.setState({ currentInput: this.number_region_word.current });
      if (this.number_region_letter.current.value)
        this.focusLastInput(this.number_region_letter.current);
      if (this.number_item_1.current.value)
        this.focusLastInput(this.number_item_1.current);
      if (this.number_item_2.current.value)
        this.focusLastInput(this.number_item_2.current);
      if (this.number_item_3.current.value)
        this.focusLastInput(this.number_item_3.current);
      if (this.number_item_4.current.value)
        this.focusLastInput(this.number_item_4.current);
      if (this.number_item_5.current.value)
        this.focusLastInput(this.number_item_5.current);
      if (this.number_item_6.current.value)
        this.focusLastInput(this.number_item_6.current);
    } else {
      this.state.currentInput.value = boardKey;
      if (this.number_region_word.current.value)
        this.focusNextInput(this.number_region_word.current);
      if (this.number_region_letter.current.value)
        this.focusNextInput(this.number_region_letter.current);
      if (this.number_item_1.current.value)
        this.focusNextInput(this.number_item_1.current);
      if (this.number_item_2.current.value)
        this.focusNextInput(this.number_item_2.current);
      if (this.number_item_3.current.value)
        this.focusNextInput(this.number_item_3.current);
      if (this.number_item_4.current.value)
        this.focusNextInput(this.number_item_4.current);
      if (this.number_item_5.current.value)
        this.focusNextInput(this.number_item_5.current);

      if (this.number_region_word.current.value) this.selectBoard("mix");
    }
  };

输入一位焦点自动跳转到下一输入框

 focusNextInput(thisinput) {
    var inputs = this.state.carNumberArray;
    for (var i = 0; i < inputs.length; i++) {
      if (i === inputs.length - 1) {
        inputs[0].focus();
        break;
      } else if (thisinput === inputs[i]) {
        inputs[i + 1].focus();
        break;
      }
    }
  }

删除一个焦点自动跳转到上一位

  focusLastInput(thisinput) {
    var inputs = this.state.carNumberArray;
    for (let i = inputs.length - 1; i >= 0; i--) {
      if (thisinput === inputs[i]) {
        inputs[i].focus();
        break;
      }
    }
  }

希望有更好的方法相互交流