Javascript 如何使onClick函数在单击图标时启动？

我正在尝试为加号图标设置onClick函数。该图标仅显示在没有子元素的任何元素旁边（即在我的嵌套菜单中，没有更多元素的元素）。当我通过执行来测试

onClick

时，

console.log

似乎每当我单击菜单中的某个元素时，它都会触发两次或四次。有人知道我能做些什么，让它只在点击加号图标时才会启动吗？或者为什么它会在单击任何元素时激发？有关更多详细信息，请参见下面的屏幕截图

class MenuTest extends React.Component {
  state = {
    categories: [],
    objectKeys: null,
    tempKeys: []
  };

这里是我在加号标签中设置

onClick

  makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    const layerKeys = Object.entries(layer).map(([key, value]) => {
{/*if the element still has children, insert an arrow, if not, insert nothing*/}      
var arrow = Object.keys(value).length ? (
        <FontAwesome name="angle-right" />
      ) : (
        ""
      );
{/*if the element has no children, insert a plus sign, if not, insert nothing*/}
      var ex =
        Object.keys(value).length === 0 ? <FontAwesome name="plus" onClick={console.log("clicked")} /> : "";
      return (
        <ul key={key}>
          <div onClick={() => this.handleShowMore(key)}>
            {key} {arrow} {ex}
          </div>

          {objectKeys[key] && this.makeMenuLayer(value)}
        </ul>
      );
    });
    return <div>{layerKeys}</div>;
  };

  handleShowMore = key => {
    this.setState(prevState => ({
      objectKeys: {
        ...prevState.objectKeys,
        [key]: !this.state.objectKeys[key]
      }
    }));
  };

  initializeTempKeys = layer => {
    // eslint-disable-next-line
    Object.entries(layer).map(([key, value]) => {
      const newTempKeys = this.state.tempKeys;
      newTempKeys.push(key);
      this.setState({ tempKeys: newTempKeys });
      this.initializeTempKeys(value);
    });
  };

  initializeObjectKeys = () => {
    const { tempKeys } = this.state;
    let tempObject = {};
    tempKeys.forEach(tempKey => {
      tempObject[tempKey] = true;
    });

    this.setState({ objectKeys: tempObject });
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ categories: response.data });
    });
    const { categories } = this.state;
    this.initializeTempKeys(categories);
    this.initializeObjectKeys();
    this.setState({ categories });
  }

  render() {
    const { categories } = this.state;
    return <div>{this.makeMenuLayer(categories)}</div>;
  }
}

makeMenuLayer=layer=>{
const{objectKeys}=this.state；
const layerKeys=Object.entries（layer.map）（[key，value]）=>{
{/*如果元素仍然有子元素，请插入一个箭头，如果没有，请不插入任何内容*/}
var arrow=对象。键（值）。长度(
) : (
""
);
{/*如果元素没有子元素，请插入加号，如果没有，请不插入任何内容*/}
var-ex=
Object.keys（value）.length==0？：“”；
返回(

此.handleShowMore（键）}>
{key}{arrow}{ex}
{objectKeys[key]&&this.makeMenuLayer（value）}

);
});
返回{layerKeys}；
};
handleShowMore=key=>{
this.setState（prevState=>({
对象键：{
…prevState.objectKeys，
[key]：！this.state.objectKeys[key]
}
}));
};
initializeTempKeys=图层=>{
//eslint禁用下一行
Object.entries（layer.map）（[key，value]）=>{
const newTempKeys=this.state.tempKeys；
newTempKeys.push（按键）；
this.setState（{tempKeys:newTempKeys}）；
此参数为.initializeTempKeys（值）；
});
};
initializeObjectKeys=（）=>{
const{tempKeys}=this.state；
让tempObject={}；
tempKey.forEach（tempKey=>{
tempObject[tempKey]=true；
});
this.setState（{objectKeys:tempObject}）；
};
componentDidMount（）{
axios.get（“https://www.ifixit.com/api/2.0/categories）然后（响应=>{
this.setState（{categories:response.data}）；
});
const{categories}=this.state；
这是。初始化mpkey（类别）；
这是.initializeObjectKeys（）；
this.setState（{categories}）；
}
render（）{
const{categories}=this.state；
返回{this.makeMenuLayer（categories）}；
}
}

这就是我的菜单在某些元素展开时的外观。我希望仅当单击领带旁边的加号时，

onClick

才会启动。

这就是我尝试测试控制台时显示的内容

我正在处理的数据：

---

使用回调函数包装onclick事件，然后调用console将起作用，因为您需要使用onclick绑定异步函数，而不是直接调用console.log：

<FontAwesome name="plus" onClick={() => {console.log("clicked")}} /> 

{console.log（“clicked”）}/>

---

谢谢

@Emily刚刚从评论中发布了我们的车队，这样更容易参考解决方案

“当您执行

onClick={console.log（“clicked”）

}时，当您呈现FontAwesomeIcon时，它将立即执行该逻辑。为了解决这个问题，您将传入一个匿名函数，而不是

like（）=>yourlogic（）

，它将被动地等待您的单击事件侦听器触发。”

console.log（“单击”）}>

附件是否有两个孩子？领带也有两个孩子吗？@Christophengo有两个孩子，但领带没有。配件的两个孩子是领带和雨伞。我将发布一个数据的屏幕截图以便更好地查看我看到了，我认为您可以通过执行onClick={（）=>console.log（“test”）}来解决这个问题。@christophengo这很有效！非常感谢。你能解释一下为什么这比不使用

（）=>

有效吗？当然，这实际上只是一个React/JSX的东西！当您执行onClick={console.log（“clicked”）}时，当您呈现FontaWebSomeIcon时，它将立即执行该逻辑。为了解决这个问题，您可以传入一个匿名函数，比如（）=>被动地等待您的点击事件监听器触发。

<FontAwesome name="plus" onClick={() => console.log("clicked")} />