按下 React 鍵（'Enter'）后如何清除輸入字段？

Question

我正在開發一個小應用程序，在輸入金額后，我會為兩個不同的人顯示他們的余額。 例如，如果亞歷克斯的當前余額為 100，而我在收入字段中輸入一個數字，余額就會增加。 當您在費用字段中輸入數字時，余額會減少。 第二個人也一樣。 我試圖在按下回車鍵后清除字段。

應用程序.tsx

import React, { useState } from 'react'
import './App.css'

import { Header } from './components/Header'
import { Balance } from './components/Balance'

function App() {
  const [alexBalance, setAlexBalance] = useState(0)
  const [yuliaBalance, setYuliaBalance] = useState(0)

  const [value, setValue] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {

    if (e.key === 'Enter') {
      calcResult(e.currentTarget.id, value)
      // document.querySelectorAll('input').forEach(input => (input.value = ''))
    }
  }

  const calcResult = (id: string, val: string) => {
    switch (id) {
      case 'deposit-Alexander':
        setAlexBalance(alexBalance + Number(val))
        break
      case 'withdraw-Alexander':
        setAlexBalance(alexBalance - Number(val))
        break
      case 'deposit-Yulia':
        setYuliaBalance(yuliaBalance + Number(val))
        break
      case 'withdraw-Yulia':
        setYuliaBalance(yuliaBalance - Number(val))
        break
    }
  }

  return (
    <div className='App'>
      <Header />
      <div className='wrapper flex flex-wrap justify-around'>
        <Balance user='Alexander' onChange={handleChange} onKeyDown={handleKeyDown} balance={alexBalance}
        />
        <Balance user='Yulia' onChange={handleChange} onKeyDown={handleKeyDown} balance={yuliaBalance}
        />
      </div>
    </div>
  )
}

export default App

余額.tsx

import { Input } from './Input'
import React from 'react'

type BalanceProps = {
  user: string
  balance: any
  onKeyDown: React.KeyboardEventHandler
  onChange: React.ChangeEventHandler<HTMLInputElement>
  
}

export const Balance = (props: BalanceProps) => {
  return (
    <div className='balance mb-8 mt-8 border-2 shadow rounded py-8 px-8 w-4/6 max-w-3xl'>
      <div className='balance__header flex flex-col'>
        <span className=''>
          {props.user}'s current balance: {props.balance}
        </span>
        <span>Enter a value</span>
        <Input
          id={`deposit-${props.user}`}
          name={`add-${props.user}`}
          placeholder='+ income'
          onKeyDown={props.onKeyDown}
          onChange={props.onChange}
        />
        <Input
          id={`withdraw-${props.user}`}
          name={`sub-${props.user}`}
          placeholder='- expense'
          onKeyDown={props.onKeyDown}
          onChange={props.onChange}
        />
      </div>
    </div>
  )
}

輸入.tsx

import { ChangeEventHandler, KeyboardEventHandler } from 'react'

type InputProps = {
  placeholder: string
  id: string
  name: string
  onKeyDown: KeyboardEventHandler<HTMLInputElement>
  onChange: ChangeEventHandler
}

export const Input = (props: InputProps) => {

  return (
    <div>
      <input
        type='text'
        id={props.id}
        name={props.name}
        className='input shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-center w-4/6 mt-2 mb-2'
        onKeyDown={props.onKeyDown}
        onChange={props.onChange}
        placeholder={props.placeholder}
      />
    </div>
  )
}

我試過這個...，

  const handleKeyDown = (e: React.KeyboardEvent) => {

    if (e.key === 'Enter') {
      calcResult(e.currentTarget.id, value)
      document.querySelectorAll('input').forEach(input => (input.value = ''))
    }
  }

它對我有用，但據我所知，這不是最佳做法。 我想使用 state 獲得解決方案。我不想為每個輸入使用單獨的 state。 多謝

Answer 1

您做對了，只需在單擊輸入時將 setState 設置為空即可，因此不要將 e.key==='Enter' 塊中的注釋代碼設置為空，例如將所需的 state 設置為空

setAlexBalance(0)
setYuliaBalance(0)
setValue('')