反応、ダブルクリックでテキストを編集

Reactを使用して、ダブルクリックしたときにページの一部を編集する方法

要素のダブルクリックイベントをリッスンし、その要素を編集可能にする必要がありました。

そのための1つの方法は、toggle状態変数。要素をダブルクリックすると、別の要素が表示されます。

const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
…
toggle ? (
<p
onDoubleClick={() => {
setToggle(false)
}}
>{name}</p>
) : (
<input
type=‘text’
value={project.status}
/>
)}

次に、いくつかの小道具をに追加しましたinput素子。まず、name状態にvalue小道具。

次に、onChange()の値を設定するイベントリスナーname内容に変更があった場合の変数inputフィールド。

最後に使用しますonKeyDown()傍受するEnterまたはEscapeキーを押してイベントを表示し、p素子：

<input
  type="text"
  value={name}
  onChange={(event) => {
    setName(name)
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === 'Escape') {
      setToggle(true)
      event.preventDefault()
      event.stopPropagation()
    }
  }}
/>

たとえば、必要に応じて値をどこかに保存するために、その関数に任意の副作用を追加することもできます。

私の無料ダウンロードReactハンドブック

反応、ダブルクリックでテキストを編集

Reactを使用して、ダブルクリックしたときにページの一部を編集する方法

その他の反応チュートリアル：