如何解决使用按钮元素onClick的值更新状态
我在下面的一些代码中,我的父组件中的包装状态为空字符串。
我想做的是创建一个处理程序函数,该函数将获取按钮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。-我只想将size的状态设置为button元素内的任何值,但这似乎不起作用。
EDIT1:更新了代码以将尺寸发送给孩子。
EDIT2:此当前代码引发类型错误:“无法读取null的'innerText'属性”是因为获取JSX元素的innerText与HTML元素不同吗?
EDIT3:我已经在下面回答了我自己的问题。我的处理程序功能需要调整。
export const Child = ({
size,onClick,}) => {
return (
<div>
<button onClick={onClick}>500</button>
</div>
);
};
解决方法
尝试:
const handleSize = (e) => {
setState((state) => ({
...state,size: e.target.innerText,}))
}
https://reactjs.org/docs/hooks-reference.html#functional-updates
,好,发现问题了,我的处理程序函数需要进行一些调整。
const handleSize = (e) => {
const { value } = e.target;
setState((state) => ({
...state,size: value,}));
};
我决定不使用按钮的innerText而是使用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>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。