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

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

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

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

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

Я удалил ненужный код в следующем фрагменте: 

import React, { useState } from 'react'
import AuthenticationService from '../service/AuthenticationService';

export const LoginComponent1 = () => {
    const [userName, setUserName] = useState('Neil');
    const [password, setPassword] = useState('');
    const [loginStatus, setLoginStatus] = useState(false);

    const handleChange = (event) => {
      this.setState(
        {
          [event.target.name]: event.target.value
        }
      );
    }

    const loginClicked = () => {
       ...
    }


    const enterPressed = (event) => {
        ...
    }

    return (
        <div className="container">
            <h1>Login</h1>
            <div className="container">

                User Name: <input className= "userNameBox" type="text" placeholder="Neil" name="username" value={userName} onChange={handleChange} onKeyPress={enterPressed}></input>
                Password: <input className= "userNameBox" type="password" id="myInput" name="password" value={password} onChange={handleChange} onKeyPress={enterPressed}></input>
                <hr></hr>
            </div>
        </div>
    )
}
export default LoginComponent1

Спасибо!

Ответы [ 3 ]

1 голос
/ 16 июня 2020

При объявлении состояния в функциональном компоненте второй передаваемый вами параметр - это метод, используемый для установки состояния. this.setState доступно только в компонентах класса. См. Здесь

В вашем примере для установки пароля состояния вам необходимо вызвать метод setPassword со значением. Например: setPassword('this is my password')

1 голос
/ 16 июня 2020

this.setState существует только в компонентах класса, а не в функциональных.

Для обновления состояния с помощью хуков useState просто вызовите соответствующий установщик. В вашем примере вызовите setUserName, чтобы обновить имя пользователя, setPassword, чтобы обновить пароль, и т. Д.

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

, если вы хотите создать общий c обработчик, как раньше, когда у вас был компонент на основе реакции с несколькими обработчиками состояния, вы можете создать обработчик объекта после ваших useState хуков и реорганизовать свой дескриптор

...