React検証コードコンポーネント実装_07

import React from 'react'

class AutotabInput extends PureComponent {
    constructor(props) {
        super(props)

        this.handleChange = this.handleChange.bind(this)
        this.handleTab = this.handleTab.bind(this)
        this.handleDelete = this.handleDelete.bind(this)
    }

    handleChange(e) {
        const input = e.target.value
        if (this.props.onChange) {
            this.props.onChange(input)
        }
        this.handleTab(e)
    }

    handleDelete(e) {
        const BACK_SPACE = 8
        const isBackSpaceKey = e.keyCode === BACK_SPACE
        if (isBackSpaceKey && e.target.value.length === 0) {
            let previous = e.target
            previous = previous.previousElementSibling
            while (previous) {
                if (previous === null) break
                if (previous.tagName.toLowerCase() === 'input') {
                    previous.focus()
                    break
                }
            }
        }
    }

    handlePaste(e){
        let clipboardData = e.clipboardData || window.clipboardData;
        if(clipboardData){
            let clipdata=clipboardData.getData('Text')
            return this.props.handlePaste(clipdata)
        }
    }

    handleTab(e) {
        const target = e.target
        const input = target.value
        if (input.length >= this.props.maxLength) {
            let next = target
            next = next.nextElementSibling
            while (next) {
                if (next === null) break
                if (next.tagName.toLowerCase() === 'input') {
                    next.focus()
                    break
                }
            }
        }
    }

    render() {
        return (
             (this._input = c)}
                onPaste={(e)=>{this.handlePaste(e)}}
            />
        )
    }
}

export default AutotabInput

import React from "react";
import AutoTabInput from "./AutoTabInput.jsx";
class CodeInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  unitOnChange(index, unit) {
    return this.props.onChange(index, unit);
  }
  render() {
    const styleObj = {
      boxSizing: "border-box",
      border: "1px solid #cdcbcb",
      boxShadow: "none",
      outlineColor: "#1054ff",
      outlineWidth: "2px",
      textAlign: "center",
      marginRight:10
    };
    const lastStyleObj = {
      boxSizing: "border-box",
      border: "1px solid #cdcbcb",
      boxShadow: "none",
      outlineColor: "#1054ff",
      outlineWidth: "2px",
      textAlign: "center",
    };
    const styleErr = {
      boxSizing: "border-box",
      border: "1px solid #f44236",
      boxShadow: "none",
      outline:'none',
      textAlign: "center",
      marginRight:10
    };
    const lastStyleErr = {
      boxSizing: "border-box",
      border: "1px solid #f44236",
      boxShadow: "none",
      outline:'none',
      textAlign: "center",
    };
    return (
      

        

        
          
          
          
          
          
          
        
        {this.props.allDelete ? (
          

           {
              this.props.resetCode();
              this.refs.myinput._input.focus();
            }}
          />
          
        ) : (
          ""
        )}
          
      
    );
  }
}
export default CodeInput;