使用按钮元素 onClick 的值更新状态

Question

下面有一些代码，我在 parent 组件中将大小的状态声明为空字符串。

我想做的是创建一个处理程序函数，它将获取按钮 onClick 的 innerText 并使用该值更新大小状态。

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}
        />
    );
}

这是带有按钮的 child 组件，其 innerText 为 500。- 我只是想将大小状态设置为按钮元素内的任何值，但这似乎不起作用。

EDIT1：更新代码以将大小发送到 child。

EDIT2：当前代码抛出类型错误：'无法读取属性 'innerText' of null' 这是因为获取 JSX 元素的 innerText 不同于 HTML 元素吗？

EDIT3：我已经在下面回答了我自己的问题。我的处理函数需要调整。

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

Answer 1

尝试：

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

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

Answer 2

好的，问题找到了，我的处理函数需要一些调整。

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

我决定使用值而不是使用按钮的 innerText。

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>
    );
};

使用按钮元素 onClick 的值更新状态

Update state with value from button element onClick

state

event-handling

reactjs

react-hooks