Question

我有一个React“ tree”菜单组件，该组件具有带子菜单的主链接，这些子菜单由JSON get调用动态生成。在React Inspector中，我可以看到树上的每个元素都有多个道具，但是当我单击每个元素时，唯一可以访问的元素就是值。这是道具列表：

{
  "checked": 0,
  "className": null,      
  "label": "192.168.1.71",       
  "isLeaf": false,
  "isParent": true,      
  "title": null,
  "treeId": "rct-~xDYGzs",
  "value": "5bd350bf-8515-4dc2-9b12-16b221505593",            
}

以下是用于访问值的代码（在组件API中提供）：

onClick(clicked) {
    this.setState({ clicked });
    console.log('You clicked on ' + clicked.value);
}

如果我将任何其他道具名称（例如“ treeId”）替换为clicked.value，则会得到“未定义”。我已经尝试了e.target和getAttributes的每种变体，但是没有任何效果。希望这是足够的信息，以获得一些建议，但是如果需要的话，我绝对可以添加更多。预先感谢。

附录：所有这些脚本都编写成一个预先存在的组件，称为react-checkbox-tree，因此将Codesandbox组合在一起将很困难。我按照建议进行了console.log（单击），得到了以下内容：

{value: "5bd81d67-3fd5-464a-b115-161ce291c2d8", checked: false}

无论出于何种原因，除了价值和检查之外的其余道具都没有报告，我无法访问它们，并且我已经尝试了所有可以想象的东西。

Answer 1

this.setState({ clicked })是this.setState({ clicked: clicked })的简写。这称为Object Destructuring。如果将其更改为其他任何内容，它将被重写为（对于treeId）：treeId: treeId（传递给onClick函数的变量名为clicked，因此treeId是未定义的。）

如果要将treeId设置为clicked.value，只需使用：

this.setState({
    treeId: clicked.value
});

如果value位于clicked对象上，那么您仍然可以在参数中使用对象销毁功能，而这就是您所关心的：

onClick({ value }) {
    this.setState({ treeId: value });
    console.log(`You clicked on ${value}`);
}

Answer 2

之所以只能从onClick获得[value]属性，是因为其他数据不会在鼠标事件中传递。如果您想从子组件中返回所有道具，则可以调整编写点击处理程序的方式以返回如下函数：

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

如何从React中的点击元素获取动态道具

2 个答案: