Как установить состояние вычисляемого свойства с помощью хуков - PullRequest
Новая
       9

Как установить состояние вычисляемого свойства с помощью хуков

0 голосов
/ 16 июня 2020

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

Я наткнулся на это 

handleChange(event){
   setState({ [event.target.name]: event.target.value })
}

Я создал useState хук для других значений в компоненте, но я не знаю, как go я могу установить состояние для вычисляемое свойство. 

Password: <input className= "userNameBox" type="password" name="password" value={this.state.password} onChange={this.handleChange} onKeyPress={this.enterPressed.bind(this)}></input>

Выше я вызываю метод, если это актуально.

Может ли кто-нибудь сказать мне, что я бы изменил в этом методе, чтобы он использовал хуки?

Ответы [ 2 ]

3 голосов
/ 16 июня 2020

С хуками вам нужно использовать функциональные обновления с prevState, потому что он не сливается с предыдущим состоянием, как с this.setState эквивалент.

См. Обновления состояния объединены . 

const Component = () => {
  const [value, setValue] = useState({ password: "" });
  const onChange = ({ target: { name, value } }) => {
    setValue((prevState) => ({ ...prevState, [name]: value }));
  };
  return <input name="password" value={value.password} onChange={onChange} />;
};
0 голосов
/ 16 июня 2020

Во-первых, вам нужно импортировать метод useState из React следующим образом. 

import React, { useState } from "react";

После этого используйте метод useState с начальным значением. 

const [state, setState] = useState(null);

И, наконец, просто обновите handleChange 

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

Пожалуйста, просмотрите эту ссылку для получения подробной информации. Вы также можете использовать метод useEffect . Лучше, когда требуется несколько состояний

...