Есть ли способ обновить несколько useState (реагирующий хук) или несколько свойств одного useState (реагирующий хук) с одним обработчиком событий? - PullRequest
Новая
       33

Есть ли способ обновить несколько useState (реагирующий хук) или несколько свойств одного useState (реагирующий хук) с одним обработчиком событий?

0 голосов
/ 30 апреля 2019

Я работаю над формой входа в систему с 2 полями.Электронная почта и пароль.Когда я использую 2 useState, представляющий два поля, тогда, когда я обновляю состояние с помощью handleChange, оба состояния обновляются.Что не является намерением. 

   const [email, setEmail] = useState()
   const [password, setPassword] = useState()

    const handleChange = e => {
        const {value} = e.target
        setEmail(value)
        setPassword(value)
    }

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

    const [state , setState] = useState({
        email : "",
        password : ""
    })

    const handleChange = e => {
        const {name , value} = e.target
        setState({
            [name] : value
        })
    }

Но это обновляет по одному свойству за раз.И другая стоимость имущества теряется.Так есть ли способ, которым я могу обновить все мое поле ввода с помощью одного обработчика событий, как мы могли бы сделать с компонентом с состоянием. 

    this.state = {
      email : "",
      password : ""
    }

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

Ответы [ 5 ]

1 голос
/ 30 апреля 2019

Вы можете создать собственный хук следующим образом: 

import React, { useState } from 'react';

export default function App() {
    const username = useFormInput(''); // use it here
    const password = useFormInput(''); // & here...
    return (
        <div>
            <form>
                <input type='text' placeholder='username' {...username} />
                <input type='password' placeholder='password' {...password} />
                <input type='submit' />
            </form>
        </div>
    );
}

// custom hook
function useFormInput (initialValue) {
    const [value, setValue] = useState(initialValue);
    const handleChange = event => {
        setValue(event.target.value);
    };
    return { value, onChange: handleChange };
};
0 голосов
/ 27 июня 2019 
// The useState Hook is used in React,
const {obj, setObj} = useState({ // Initially a value of `{}` object type
  foo: {},
  bar: {}
})

const handle = event => {
  setObj({   // here `{}` is a new value of type object
    ...obj,  // So, first use the ... operator to get the prevState
    bar: { qux: {} } // then, update
  })
}
0 голосов
/ 01 мая 2019

Благодаря Doğancan Arabacı.Я попытался имитировать состояние и setState из компонента на основе классов, чтобы ощущение не изменилось.Мое решение выглядит следующим образом. 

const [state , setState] = useState({
    email : "",
    password : ""
})

const handleChange = e => {
    const {name , value} = e.target
    setState( prevState => {
        ...prevState,
        [name] : value
    })
}
0 голосов
/ 30 апреля 2019

Попробуйте

this.state = { Эл. адрес : "", пароль : "" } 

const handleChange = e => {
    const updated = {name , value} = e.target
    const next = {...this.state, ...updated}
    this.setState({next})
}
0 голосов
/ 30 апреля 2019

Вы должны использовать setState с функцией обратного вызова: 

setState(prev => ({ 
    ...prev,
    email: 'new mail',
}))

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

...