A component for taro app

VerifyCodeInput.scss

$component: '.verify-code-input';

#{$component} {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  &__view {
    height: 128px;
    width: 96px;
    background-color: #F2F2F2;
    text-align: center;
    border-radius: 8px;
    font-size: larger;

    &--active {
      height: 124px;
      width: 92px;
      border: solid 2px #F2662B;
    }
  }
  
  &__input {
    position: absolute;
    left: -1000px;
  }

  &__item {
    height: 100%;
    color: #484848;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

    &--active {
      color: #F2662B;
    }
  }
}

VerifyCodeInput.tsx

// tslint:disable: no-string-literal
import { Input, View } from "@tarojs/components";
import Taro, { Component } from "@tarojs/taro";
import cx from "classnames";
import "./VerifyCodeInput.scss";

interface VerifyCodeInputState {
  focus: boolean;
  inputValue: string;
}

type OnCompleteFunction = (code: string) => void;

interface VerifyCodeInputProp {
  onComplete: OnCompleteFunction;
}

class VerifyCodeInput extends Component<VerifyCodeInputProp, VerifyCodeInputState> {
  constructor() {
    super(...arguments);
    this.state = {
      focus: true,
      inputValue: "",
    };
  }

  public handleClick() {
    this.setState({
      focus: false,
    }, () => {
      this.setState({
        focus: true,
      });
    });
  }

  public handleBlur() {
    this.setState({
      focus: false,
    });
  }

  public handleInput(evt: any) {
    this.setState({
      inputValue: evt.detail.value,
    });
    if (evt.detail.value.length === 6) {
      this.props.onComplete(evt.detail.value);
      this.setState({ focus: false });
    }
  }

  public render(): any {
    const {
      inputValue,
    } = this.state;
    const editingIndex = inputValue.length;
    return <View className={"verify-code-input"}>
      <Input
        className="verify-code-input__input"
        focus={this.state.focus}
        onBlur={this.handleBlur.bind(this)}
        onInput={this.handleInput.bind(this)}
        type="number"
        cursorSpacing={100}
        value={inputValue}
        maxLength={6}
      />
      {
        [0, 1, 2, 3, 4, 5].map((index) => {
          return <View
            className={cx("verify-code-input__view",
              editingIndex === index ? "verify-code-input__view--active" : undefined)}
            key={index}
          >
            <View
              className={cx(
                "verify-code-input__item",
                editingIndex === index ? "verify-code-input__item--active" : undefined,
              )}
              data-id={index}
              onClick={this.handleClick.bind(this)}
            >
              {editingIndex === index ? "" : inputValue.substring(index, index + 1)}
            </View>
          </View>;
        })
      }
    </View>;
  }
}

export default VerifyCodeInput;