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

【问题标题】：Update state with value from button element onClick使用按钮元素 onClick 的值更新状态
【发布时间】：2021-01-10 07:16:32
【问题描述】：

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

我要做的是创建一个处理函数，它将获取按钮 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}
        />
    );
}

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

EDIT1：更新代码以将大小发送给孩子。

EDIT2：当前代码抛出 TYPE ERROR: 'Cannot read property 'innerText' of null' 这是因为获取 JSX 元素的 innerText 与 HTML 元素不同吗？

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

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

【问题讨论】：

这看起来很合理，但由于 size 没有在任何地方使用，您不会看到状态更改的影响
啊，看看我更新的代码。我现在正在向下传递大小，但是，我应该在哪里声明它以从按钮元素中获取静态值？按钮中的 value={size} 可能吗？
您不一定需要将其传递下去，您只需要在 somewhere 使用它，这样您就可以直观地看到状态的变化。即使是console.log(size) 也应该这样做——你想用那个属性做什么？
我将有几个不同大小值的按钮。单击后，更新状态将更新另一个元素的大小（宽度）。
那你需要在某处实现那个宽度，才能看到状态改变的效果，否则它实际上是不可见的

标签： reactjs event-handling react-hooks state

【解决方案1】：

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

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

我决定使用 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>
    );
};

【讨论】：

【解决方案2】：

试试：

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

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

【讨论】：