入力フィールドがあるとしましょう：
<input type="text" value={this.state.title} />
これで、たとえば「おはようございます！」という値になります。私がやりたいのは、特定のボタンが入力フィールドのどこかでクリックされたときに、事前定義されたテキストを入力フィールドに挿入できるようにすることです。たとえば、"[First Name]"/"[LastName]"ボタンをクリックすると、入力フィールドの値が「おはよう[名]」のようになります。
現在、フォーカスされた入力を取得し、それを状態に割り当て、それを使用して状態内のどのキーを変更するかを知ることにより、テキストの最後に追加することができます。
addCodeText(value) {
const { currFocusedInput } = this.state;
this.setState({
[currFocusedInput]: `${
this.state[currFocusedInput]
} [${value}]`,
});
}
ただし、前述したように、これはテキストの最後に追加されるだけです。状態を変更するのではなく、入力タグ/要素に直接挿入して、挿入する場所を選択できるようにしたいと思います（とにかく、入力要素は制御された入力です）。
つまり、「おはよう」の前の入力フィールドにカーソルを置くと、ボタンをクリックしたときの値は「[名]、おはよう！」のようになります。私の現在の例では、文字列の値が何であれ、常に最後に追加されます。
どうすればこれを行うことができますか？
@catandmouseそれを行う別の方法があります。フックを使用する必要はありません。これは、コンポーネントのローカルstateviasetStateメソッドを使用して実行できます。以下の例で遊ぶことができます。
まず、フィールド"A word"内に文字列を取得しました<input>。ボタンをクリックすると、が表示されます"A word with big sense"。
class FieldUpdate extends React.Component {
constructor() {
super();
this.state = {
title: 'A word',
};
}
onChange(e) {
this.setState({
title: e.target.value
});
}
updateText(text) {
this.setState({
title: `${this.state.title} ${text}`
});
}
render() {
return (
<div>
<input type="text" value={this.state.title} onChange={(e) => this.onChange(e)} />
<button onClick={() => this.updateText('with big sense')}>Update text</button>
</div>);
}
}
React.render(<FieldUpdate />, document.getElementById('app'));<head><script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
</head>
<body>
<div id="app"></app>
</body>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加