ユーザーのメールアドレスにコードを送信する必要のあるメール確認を作成する必要があります。彼らのサインアップフローの途中スラックハンドルの電子メールの確認に非常によく似：Reactでは、ユーザーのクリップボード貼り付けイベントにバインドしてデータを解析する方法は？
あなたが貼り付けると、貼り付けたテキストは、他の後に1つの入力にinputedされます。反応すると、このような機能を実装する正しい方法は何でしょうか？
componentDidMountの後、私はバインドして、キーの貼り付けをキャプチャする必要がありますか？それは正しいアプローチですか？
ありがとうございます
あなたが正しい方向に始めるための非常に簡単な例です。これは、使用する前にいくつかの作業が必要になります。ここではそれが何をするかです：
特に難しいことはありません。この例ではローカルの状態を使用していますが、これはReduxのような別の状態管理の実装に移行することができます。 <App />コンポーネントがonPasteイベントを処理<Input />
のコンテナをレンダリングするために制御入力
<App />をレンダリングするために、及び通過 -
<Input />： デモは、2つの成分を使用し貼り付けられたデータから各値への適切な値<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>
これは本当にクールなコンポーネントです！ブラウザのサポートに関する考えはありますか？ –
箱から出て、それは私が信じるいくつかの問題があるでしょう。たとえば、問題を引き起こす可能性のある 'event.clipboardData'には違いがあります。だから、もっと頑強にする必要があります。キーコードも同様です。バベルは、いくつかのために便利かもしれませんが、これらのすべてではないかもしれません。 –
きれいな答えです。ありがとうございました – AnApprentice