Блог

У меня есть button компонент React, который не запускает onClick событие при нажатии. Я добавил :active CSS-селектор, чтобы убедиться, что он включен и доступен для просмотра. странно то, что onChange обработчик на input рядом с ним работает нормально. Есть мысли?

 return (
  <ul className="horizontal">
    <li className="adjustInput">
      <label>
        <input max={200} min={10} onChange={e => actions.onAdjustSize(e.target.value)} type="range" value={size} />
        Image Size: {size}%
      </label>
    </li>
    <li className="adjustInput">
      <label>
        <input max={OPACITY_MULTIPLIER} min={OPACITY_MULTIPLIER / 10} onChange={e => {actions.onAdjustOpacity(e.target.value / OPACITY_MULTIPLIER)}} type="range" value={opacity} />
        Opacity: {opacity}%
      </label>
    </li>
    <li className="adjustInput">
      <label>
        {/* This onChange is fired when I type in the input */}
        <input onChange={actions.onRemove} type="text" />
        {/* This onClick isn't fired no matter what I try */}
        <button onClick={actions.onRemove}>Remove</button>
      </label>
    </li>
  </ul>
);
  

Изображение пользовательского интерфейса, отображаемое кодом выше

Я, очевидно, пытался щелкнуть по кнопке с помощью мыши. Я также пробовал переходить к нему с табуляцией и нажимать пробел и ввод. Запуск щелчка вручную в JS. Кажется, ничего не работает :/