如何在另一个组件的已绑定onClick事件中使用更新的变量？
unc狗
我有一个对象数组，其中每个对象都有一个onclick事件。我将对象数组映射到组件。我有一个按钮，可以在其中更改变量的值。
如果单击按钮，它将更改变量的值，但是当我在其中一个组件上触发onclick事件时，它将不使用变量的更改后的值。（我猜这是正常的行为，因为该事件在创建时已绑定到该组件。）
虽然，如何在组件的onClick事件中使用更新后的变量值？
首先，我声明我的变量
const [myVariable, setMyVariable] = useState("first value");
const [mymap, setmymap] = useState([
{
key: 1,
name: "one",
onClick: event => handleClick(event)
},
{
key: 2,
name: "two",
onClick: event => handleClick(event)
}
]);
setVariable是我的第一个按钮的onClick事件，它会更改变量的值
const setVariable = () => {
setMyVariable("second value");
};
handleClick是我组件的onClick事件
const handleClick = () => {
console.log(myVariable);
};
在这里，我返回了带有我的MyComponent映射的UI
return (
<div>
<button onClick={setVariable}>Set variable</button>
<h1>{myVariable}</h1>
{mymap.map(element => (
<MyComponent key={element.key} onclickevent={element.onClick} />
))}
</div>
);
艾瓦拉斯
在这个示例中，将事件存储在每个mymap项目中看起来都是多余的。如果没有理由，那么较简单的版本将按预期工作：
import React, { useState, useCallback } from "react";
const MyComponent = ({onclickevent}) => (<div>
<button onClick={onclickevent}>
Use variable from MyComponent
</button>
</div>);
const MyPage = props => {
const [myVariable, setMyVariable] = useState("first value");
// handler changes only when `myVariable` changes
const clickHandler = useCallback(() => {
console.log(myVariable);
}, [myVariable]);
// removing handlers from state
const [mymap, setmymap] = useState([
{
key: 1,
name: "one"
},
{
key: 2,
name: "two"
}
]);
return (
<div>
<button onClick={() => setMyVariable("second value")}>Set another value</button>
<h1>{myVariable}</h1>
{mymap.map(element => (
<MyComponent key={element.key} onclickevent={clickHandler} />
))}
</div>
);
};
export default MyPage;
在上面的方法中，将处理程序存储在一个状态中，然后在迭代状态元素时获取它，然后将mymap.map(el => el.onClick)其直接传递给子代（示例显示这些子代还是一样）。但是我们还需要确保处理程序不是陈旧的，并根据期望的值进行更改：
const clickHandler = useCallback(() => {
console.log(myVariable);
}, [myVariable]);
问题中提供的更新的Codesandbox示例：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
gwt：如何在另一个事件中使用由onClick创建的小部件？
- 2
如何在另一个组件中使用一个组件的状态？独立组件（反应）
- 3
如何在另一个函数中使用来自另一个函数的变量？
- 4
React.js如何在另一个组件中使用一个组件？
- 5
在 Vue 上，如何在另一个组件中使用一个组件中的函数？
- 6
如何在另一个变量中使用变量
- 7
如何在Azure DevOps中的另一个变量中使用变量
- 8
如何在另一个变量的名称中使用shell变量的扩展值？
- 9
如何在EEx中的<％= render ...％>中使用另一个变量中的变量
- 10
如何在带有props的另一个组件中使用useState函数？
- 11
如何在HTML的另一个组件中使用导出的函数？肛门的？
- 12
如何在 React Native 的另一个组件中使用 API 获取状态
- 13
如何在另一个模块中使用事件发射器？
- 14
React – 如何在另一个已安装的组件中渲染附加组件？
- 15
将点击事件从一个组件绑定到另一个组件
- 16
如何在C中的另一个函数中使用局部变量的值
- 17
如何在另一个函数中使用函数变量值？
- 18
如何在另一个Java类的Java方法中使用变量值？
- 19
如何在另一个会话中使用变量（Powershell ISE选项卡）？
- 20
如何在车把中使用另一个变量指定对象键
- 21
如何在C ++的另一个作用域中使用局部变量？
- 22
如何在另一个函数中使用useEffect（）中声明的变量？
- 23
如何在另一个函数PHP中使用变量
- 24
我如何在另一个班级中使用班级中的变量
- 25
如何在虚幻脚本中使用另一个类中的变量？
- 26
如何在另一个脚本的路径中使用变量？
- 27
如何在另一个函数中使用$ .getJSON返回的变量
- 28
如何在另一个类中使用$ PDO变量？
- 29
如何在另一个函数中使用函数变量值？
我来说两句