Что происходит в этом куске HandleChange | React

Question

Объясните что происходит в это куске кода пошагово. Долго сидел пытался понять, но так и не понял.

По туториалу изучаю множественный ввод формы в ReactJS. В туториале есть следующий кусок кода:

const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
}

Что такое event.target.name и event.target.value, может ли вместо name и/или value быть другие названия в зависимости от того что происходит в render() {return (...);}, то есть если у меня в форме не name а, к примеру, samplename

<input 
    type="text" 
    name="samplename" 
    placeholder='Name'
    value={inputs.username || ""} 
    onChange={handleChange}
/>

Что такое Arrow function я знаю, и что при возвращении литерального выражения его нужно брать в скобки, но не совсем понимаю что происходит в к фигурных скобках, а конкретнее,

({...values, [name]: value})

Почему name в квадраных скобках, и почему ему присваивается value?

Если я хочу дальше использовать полученные данные из формы, как мне это сделать?

Приложу код всей функции:

function MultipleInputs() {
    const [inputs, setInputs] = useState({});

    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}))
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        
        alert(inputs);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
            Enter your name:
            <input 
                type="text" 
                name="username" 
                placeholder='Name'
                value={inputs.username || ""} 
                onChange={handleChange}
            />
            </label>
            <br />
            <label>
            Enter your surname:
            <input 
                type="text"
                placeholder="Surname"
                name="surname"
                value={inputs.surname || ""}
                onChange={handleChange}
            />
            </label>
            <input type="submit" value="submit" />
        </form>
    );
}

const MFRoot = ReactDOM.createRoot(document.querySelector("#MFRoot"));
MFRoot.render(<MultipleInputs />);

Answer 1

event.target.name и event.target.value.

Event.target возвращает конкретный элемент на котором случилось событие. Свойства name и value берутся у соответственно у самого этого элемента. Value отвечает за значение внутри поля input, а свойство name за атрибут name (у первого input это username, а у второго это surname).

Что происходит в скобках?

Внутри скобок разворачивается старый state и добавляется новое поле (или перезаписывается) с названием таким же как у name, а значение для этого поля будет получено у value.

Пример:

const obj = {
  username:'123',
  surname:'PPP'
}
console.log({...obj,username:'321'})

Зачем name в квадратных скобках?

Для того чтобы у поля называлось именно как значение у переменной name, а не добавлялось новое поле name.

Пример:

let name = "username"
let value = '123'
const obj1 = {name:value}
console.log(obj1)
const obj2 = {[name]:value}
console.log(obj2)

Использование полученных данных из формы.

Не совсем понятен вопрос. Но могу предположить что вы про это.

const handleSubmit = (event) => {
        event.preventDefault();
        const {username,surname}= inputs
        alert(`username:${username} ; surname:${surname}`);
    }

БЛОГ НА HUSL

Что происходит в этом куске HandleChange | React

Ответы (1 шт):