Как я могу очистить свои состояния и показать пустые входы одновременно?

Question

в реагирующем хуке, как я могу очистить свои состояния и показать пустые входы одновременно? Моя проблема в том, что, когда я сбрасываю состояние, мой ввод остается полным.

    const [state, setState] = useState([initial])

     handleInputChange(event) {
        setState({
       event.target.value
        });
      }
    const resetState = () => {  
        setState([initial])
        }
export default function newState () {

return(
    <input onChange={handleInputChange()} />
    <button onClick={resetState}/>
)
};

Answer 1

Первая проблема: Вы инициализировали state массивом, сбросили его в массив, но обновили его до объекта.

Всегда держите ваши типы данных согласованными, в этом случае ни один из них не кажется подходящим. Я бы предложил использовать только строковое значение.

const [state, setState] = useState(initial)

handleInputChange(event) {
  setState(event.target.value);
}

const resetState = () => {  
  setState(initial)
}

Помните - средство обновления useState отличается от класса setState. setState объединяет предыдущее и новое значения состояния. useState заменяет . Поэтому, если ваше состояние не является объектом, вызов обновления setState({ newState }) больше не является правильным.

Вторая проблема: <input onChange={handleInputChange()} /> не правильно. Этот код назначает onChange значение, возвращаемое при вызове handleInputChange. На самом деле вы хотите назначить onChange саму функцию.

// no ()
<input onChange={handleInputChange} />

Третья проблема: Ваш хук состояний, по-видимому, не находится внутри функционального компонента и не похоже, он настроен для использования в качестве пользовательского хука (я могу ошибаться). Переместите их в функцию компонента.

Answer 2

Что (я думаю) вы имеете в виду:

export default function Foo({ initial }) {
  const [value, setValue] = React.useState(initial)

  return(
    <>
      <input onChange={(event) => setValue(event.target.value)} value={value} />
      <button onClick={() => setValue(initial)}>Reset</button>
    </>
  )
};

Вы должны позвонить useState внутри своих компонентов.