Как заставить функцию onClick срабатывать при нажатии иконки?

Question

Я пытаюсь настроить функцию onClick для значка плюса FontAwesome. Значок появляется только рядом с любым элементом, который не имеет дочерних элементов (иначе в моем вложенном меню, элементы, в которых нет больше элементов). Когда я проверяю onClick, делая console.log, кажется, что каждый раз, когда я щелкаю элемент в меню, он срабатывает два или четыре раза. Кто-нибудь знает, что я могу сделать, чтобы он срабатывал только при нажатии на значок плюса? Или почему он срабатывает каждый раз, когда нажимается какой-либо элемент? Смотрите скриншоты ниже для более подробной информации.

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

Здесь я настроил onClick в теге плюса FontAwesome.

  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 функцией обратного вызова и последующим вызовом консоли будет работать, так как вам нужно связать асинхронную функцию с onClick, а не вызывать console.log напрямую:

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

Спасибо

Answer 2

@ Эмили просто собирается публиковать здесь наш комментарий из комментариев, чтобы было проще сослаться на решение.

"Когда вы сделали onClick={console.log("clicked")}, он сразу же выполнит эту логику, когда вы отрендеритеFontAwesomeIcon. Чтобы обойти это, вместо этого вы должны передать анонимную функцию like () => yourlogic(), которая будет пассивно ждать срабатывания прослушивателя click-event. "

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