[英]How to get dynamic prop from clicked element in React
I have a React "tree" menu component which has main links with submenus which are dynamically generated by a JSON get call. 我有一个React“ tree”菜单组件,它的主菜单带有子菜单,这些子菜单由JSON get调用动态生成。 In the React Inspector I can see that each element on the tree has several props but when I click on each element the only one I can access is value.
在React Inspector中,我可以看到树上的每个元素都有多个道具,但是当我单击每个元素时,唯一可以访问的元素就是值。 Here is the props list:
这里是道具列表:
{
"checked": 0,
"className": null,
"label": "192.168.1.71",
"isLeaf": false,
"isParent": true,
"title": null,
"treeId": "rct-~xDYGzs",
"value": "5bd350bf-8515-4dc2-9b12-16b221505593",
}
Here is the code for accessing the value (which was provided in the component API): 以下是用于访问值的代码(在组件API中提供):
onClick(clicked) {
this.setState({ clicked });
console.log('You clicked on ' + clicked.value);
}
If I substitute any other prop name (like "treeId") for clicked.value I get "undefined". 如果我用其他任何道具名称(例如“ treeId”)代替clicked.value,则会得到“未定义”。 I've tried every variation of e.target and getAttributes but nothing is working.
我已经尝试了e.target和getAttributes的每种变体,但是没有任何效果。 Hopefully this is enough info to get some advice but I can definitely add more if needed.
希望这是足够的信息,以获得一些建议,但是如果需要的话,我绝对可以添加更多。 Thanks in advance.
提前致谢。
Addendum: This is all being scripted into a pre-existing component called react-checkbox-tree so putting together a Codesandbox would be kind of difficult. 附录:所有这些脚本都编写成一个预先存在的组件,称为react-checkbox-tree,因此将Codesandbox组合在一起将很困难。 I did a console.log(clicked) as suggested and got the following:
我按照建议进行了console.log(单击),得到了以下内容:
{value: "5bd81d67-3fd5-464a-b115-161ce291c2d8", checked: false}
For whatever reason the remaining props besides value and checked are not reporting and I can't access them and I have tried everything imaginable. 不管出于什么原因,除了价值和检查之外的其余道具都没有报告,我无法访问它们,并且我已经尝试了所有可以想象的东西。
this.setState({ clicked })
is shorthand for this.setState({ clicked: clicked })
. this.setState({ clicked })
是this.setState({ clicked: clicked })
简写。 This is called Object Destructuring . 这称为对象解构 。 If you change that to anything else, then it will rewrite it to (In the case of treeId):
treeId: treeId
(The variable being passed in to the onClick
function is named clicked
, so treeId
will be undefined.) 如果将其更改为其他任何内容,它将被重写为(对于treeId):
treeId: treeId
(传递给onClick
函数的变量名为clicked
,因此treeId
将是未定义的。)
If you want to set treeId
to clicked.value
, simply use: 如果要将
treeId
设置为clicked.value
,只需使用:
this.setState({
treeId: clicked.value
});
You can still use the object destructing in the parameter, if value
is on the clicked
object, and that's all you care about: 如果
value
在所clicked
对象上,那么您仍然可以在参数中使用对象销毁,这就是您所关心的:
onClick({ value }) {
this.setState({ treeId: value });
console.log(`You clicked on ${value}`);
}
The reason you can only get the [value] prop from your onClick is because other data doesn't get passed along in a mouse event. 您只能从onClick获取[value]属性的原因是,其他数据不会在鼠标事件中传递。 If you want to return all of the props from your subcomponent you can adjust the way you're writing your click handler to return a function like this:
如果您想从子组件中返回所有道具,则可以调整编写点击处理程序的方式以返回如下函数:
class MainComponent extends Component {
handleClick(props) {
console.log(props); /* whatever you sent from the sub component */
}
render() {
return (
<SubComponent
subComponentClicked={this.handleClick}
/>
);
}
}
class SubComponent extends Component {
handleClick = () => {
this.props.subComponentClicked(this.props);
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.