使用React,如何绑定到用户的剪贴板粘贴事件并解析数据？

Question

我需要建立一个电子邮件验证,需要将代码发送到用户的电子邮件地址.与Slack在注册流程中处理电子邮件验证的方式非常相似:

粘贴时,粘贴的文本将在一个输入后输入.有了反应,实现这样的功能的正确方法是什么？

在componentDidMount之后,我应该绑定并捕获粘贴keyPress吗？这是正确的方法吗？

谢谢

Answer 1

超级简单的例子,让您开始朝着正确的方向前进.这在使用之前需要一些工作.这是它的作用:

• 允许用户粘贴代码并使用值填充每个输入
• 允许用户键入代码
• 允许用户编辑代码
• 当用户输入值时,它会将焦点移至下一个输入
• 仅允许数字输入
• 仅允许每个输入中的单个数字

这里没什么特别棘手的.我们为了示例而使用本地状态,但是这可以转移到另一个像Redux这样的状态管理实现.

该演示使用两个组件:

1. <Input /> - 呈现受控输入
2. <App /> 为...渲染一个容器 <Input />

所述<App />组件处理onPaste事件,并且从所粘贴的数据通过将适当的值的每个<Input />分量

每个<Input />组件都包含一个受控<input/>元素,该元素仅包含一个value.

// A functional component to keep it simple
class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }
  
  handleKeyDown = (event) => {
    // Handle the delete/backspace key
    if (event.keyCode === 8 || event.keyCode === 46) {
      this.setState({
        value: ''
      });
      
      return;
    }
    
    // Handle the tab key
    if (event.keyCode === 9) {
      return;
    }
    
    // Handle numbers and characters
    const key = String.fromCharCode(event.which);
    if (Number.isInteger(Number(key))) {
      this.setState({
        value: key
      }, () => {
        // Move focus to next input
        this.refs[(this.props.index + 1) % 6].focus()
      });
    }
  }
  
  componentWillReceiveProps = (nextProps) => {
    if (nextProps.value !== this.state.value) {
      this.setState({
        value: nextProps.value
      })
    }
  }

  render() {
    return (
      <div className="inputContainer">
        <input 
          className="input"
          value={this.state.value} 
          onKeyDown={this.handleKeyDown}
          ref={(ref) => this.refs[this.props.index] = ref}
          maxLength="1"
        />
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: null
    }
  }

  handlePaste = (event) => {
    event.clipboardData.items[0].getAsString(text => {
      const code = text.split("").map((char, index) => {
        if (Number.isInteger(Number(char))) {
          return Number(char);
        }
        
        return "";
      });
      
      this.setState({
        code
      });
    })
  }
  
  render() {
    const code = this.state.code;
  
    return (
      <div className="container" onPaste={this.handlePaste}>
        <Input value={code && code[0]} index={0} />
        <Input value={code && code[1]} index={1} />
        <Input value={code && code[2]} index={2} />
        <div className="spacer">-</div>
        <Input value={code && code[3]} index={3} />
        <Input value={code && code[4]} index={4} />
        <Input value={code && code[5]} index={5} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.container {
  display: flex;
}

.inputContainer {
  flex: 1;
  border: 1px solid #cccccc;
}

.inputContainer:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.inputContainer:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.spacer {
  flex: 0.3 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
}

.input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  text-align: center;
  border: none;
  outline: none;
  border-radius: 5px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Test Code: 135791

<div id="app"></div>