Блог

Главная - Вопросы по программированию - Обновить состояние значением из элемента button onClick

Обновить состояние значением из элемента button onClick

#reactjs #event-handling #react-hooks #state

#reactjs #обработка событий #реагировать-перехваты #состояние

Вопрос:

У меня есть некоторый код ниже, где я изменил состояние в моем родительском компоненте для размера в виде пустой строки.

То, что я пытаюсь сделать, это создать функцию-обработчик, которая будет принимать внутренний текст кнопки onClick и обновлять состояние size этим значением.

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

export default function Parent() {
    const [state, setState] = useState({
        name: 'bob',
        size: '',
    });

    const handleSize = (e) => {
        setState((state) => ({
            ...state,
            size: e.target.innerText,
        }));
    };


    return (
        <Child
            size={state.size}
            onClick={handleSize}
        />
    );
}

Вот дочерний компонент с кнопкой, внутренний текст которой равен 500. — Я просто хочу установить состояние size на любое значение, которое находится внутри моего элемента button, но, похоже, это не работает.

EDIT1: обновленный код для отправки размера дочернему элементу.

EDIT2: этот текущий код выдает ОШИБКУ ТИПА: «Невозможно прочитать свойство «innerText» из null» Это потому, что получение внутреннего текста элементов JSX отличается от элементов HTML?

EDIT3: я ответил на свой собственный вопрос ниже. Моя функция обработчика требовала корректировки.

     export const Child = ({
        size,
        onClick,
    }) => {
        return (
                <div>
                 <button onClick={onClick}>500</button>
                </div>
        );
    };

Комментарии:

1. Это выглядит разумно, но поскольку size нигде не используется, вы не увидите эффекта от изменения состояния

2. Ах, смотрите мой обновленный код. Однако сейчас я передаю размер вниз, где я должен объявить его, чтобы получить статическое значение из элемента button? может быть, значение = {size} в кнопке?

3. Вам не нужно обязательно передавать его, вам просто нужно, чтобы оно где -то использовалось, чтобы вы могли визуально видеть изменение состояния. Даже a console.log(size) должен это сделать — что вы пытаетесь сделать с этим свойством?

4. У меня будет несколько кнопок с разными значениями размера. После нажатия обновленное состояние обновит размер другого элемента (ширину).

5. Затем вам нужно где-то реализовать эту ширину, чтобы увидеть эффект изменения состояния, в противном случае он фактически невидим

Ответ №1:

Попробуйте:

 const handleSize = (e) => {
  setState((state) => ({
    ...state,
    size: e.target.innerText,
  }))
}

https://reactjs.org/docs/hooks-reference.html#functional-updates

Ответ №2:

Хорошо, проблема обнаружена, моя функция обработчика нуждалась в некоторых корректировках.

 const handleSize = (e) => {
    const { value } = e.target;
    setState((state) => ({
        ...state,
        size: value,
    }));
};

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

 const { value } = e.target; //assigns the target value to my size property

Ниже приведена обновленная кнопка со статическим значением «500». Функция handleSize обновит размер onClick, используя присвоенное кнопке значение.

 export const Child = ({
    size,
    onClick,
}) => {
    return (
            <div>
             <button value="500" onClick={onClick}>500</button>
            </div>
    );
};