Question

我正在尝试为FontAwesome加号图标设置onClick函数。该图标仅出现在没有子元素的任何元素旁边（又名“嵌套菜单”，即其中没有更多元素的元素）。当我通过onClick测试console.log时，似乎每次我单击菜单中的元素时，它都会触发两次或四次。有谁知道我可以做些什么才能使其仅在单击加号图标时才会触发？还是为什么每次单击任何元素时都会触发它？有关更多详细信息，请参见下面的屏幕截图。

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

这是我在FontAwesome加号标记内设置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>;
  }
}

这是扩展某些元素时菜单的外观。我希望仅在单击“领带”旁边的加号时触发onClick。

这是我尝试对其进行测试时在控制台中显示的内容

我正在使用的数据：

Answer 1

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

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

谢谢

Answer 2

@Emily只是将评论中的内容发表在这里，以便更轻松地参考解决方案。

”“当您执行onClick={console.log("clicked")}时，它将在呈现FontAwesomeIcon时立即执行该逻辑。要解决此问题，您将传入一个匿名函数而不是like () => yourlogic()，该函数将被动地等待让您的点击事件监听器触发。”

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

如何使onClick功能在图标点击时触发？

2 个答案: