Question

我正在寻找一种确定我在JavaScript中点击的类型对象的方法。

我在React（使用PrimeReact - Tree View）中填充了一个GUI元素，类似于树视图，其中包含来自Rest调用的JSon对象。现在树的第一层来自ObjectA，第二层来自ObjectB。

当用户点击时，我不想为ObjectA引发事件但仅为ObjectB引发事件，所以如果我在Java中做，我会做类似跟随的事情

ClickedObject.isAssignable(ObjectB)

这会告诉我这是我感兴趣的对象的类型。

我尝试做类似

的事情

ObjectB instanceof ClassB

但是当我从JSon构造对象时，我没有访问它的构造函数（或者有没有办法获取对象的构造函数）..

实现我想做的最好的方法是什么？

Answer 1

class App extends React.Component {
  outer = (e) => {
    console.log('outer');
  } 

  inner = (e) => {
    e.stopPropagation();
    console.log('inner');
  }

  render() {
    return (
      <div onClick={this.outer}>
        Outer
        <div onClick={this.inner}>Inner</div>
      </div>
    )
  }
};

演示：https://codesandbox.io/s/j2j6x0lo6w

或者：

class App extends React.Component {
  click = (e) => {
    e.stopPropagation();
    console.log(e.target.id);
  }

  render() {
    return (
      <div id="outer" onClick={this.click}>
        Outer
        <div id="inner" onClick={this.click}>Inner</div>
      </div>
    )
  }
};

或者：

class App extends React.Component {
  click(id, e) {
    e.stopPropagation();
    console.log(id);
  }

  render() {
    return (
      <div onClick={(e) => this.click('outer', e)}>
        Outer
        <div onClick={(e) => this.click('inner', e)}>Inner</div>
      </div>
    )
  }
};

修改

对于PrimeReact Tree组件，您可以执行对象引用相等性检查。例如：

onSelectionChange(e) { if (e.selection === data[1].children[2]) { console.log('Clicked the 3rd child of the second parent'); } }

Answer 2

如果您查看Primereact tree node对象，您会注意到data属性。你可以用它来达到你想要的效果。

Fox示例，按以下方式填充节点列表

    var data = [
        {
            "label": "Documents",
            "data": "ObjectA",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [{
                "label": "Work",
                "data": "ObjectB",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder"
            },
            {
                "label": "Work",
                "data": "ObjectB",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder"
            }]
      }];

（第一级节点有data: "ObjectA"，第二级节点有data: "ObjectB"，..）

现在您可以像这样检查函数onSelectionChange中选定的“对象类型”

onSelectionChange(e) {
    console.log("Node selected");
    console.log(e); //check out console to see structure of 'e'
    if (e.selection.data == 'ObjectA'){
        console.log("ObjectA selected");
    } else if (e.selection.data == 'ObjectB'){
        console.log("ObjectB selected");
    } else {
        console.log("Unknown object type selected");
    }
}

请注意，您可以将任何类型分配给data属性，并构建代表Primereact树节点的更复杂的数据结构。

在javascript中确定单击对象的类型

2 个答案: