Событие размытия: не размывается, если щелчок происходит внутри элемента

#javascript #reactjs

Вопрос:

У меня есть компонент, который визуально выглядит следующим образом.

Основная проблема возникает здесь:

 <div className={styles.colorPicker}>
  <input
    readOnly
    type="text"
    value={color}
    onFocus={this.showColorPalette}
    onBlur={this.hideColorPalette}
  />
  <Palette
    color={color}
    onSelect={this.selectColor}
  />
</div>

Предполагаемое поведение заключается в том, что, когда они размывают компонент, цветовая палитра должна скрываться. однако, если они нажали на что-то в цветовой палитре, это не должно скрывать палитру.

Поскольку щелчок по цветовой палитре приведет к размытию ввода, он скроет палитру. Я не могу найти способ согласовать метод палитры onClick с методом ввода onBlur таким образом, чтобы один переопределял другой.

Есть ли способ сделать это в react?

1. моя первая идея — реализовать компонент react, который запускает событие, когда пользователь нажимает снаружи, здесь у вас есть реализация airbnb. Затем вы можете использовать его следующим образом <OutsideClickHandler onOutsideClick={hideColorPallete}> <ColorPallete open={showPicker}/> <OutsideClickHandler/>

2. это полезно, но что произойдет, если они нажмут tab , чтобы перейти к следующему полю ввода?

3. следующий ввод должен вызвать hideColorPallete событие onfocus

Ответ №1:

просто попробовал что-то использовать onMouseEnter и onMousLeave для условного запуска blur() . При этом палитра цветов будет видна для выбора цвета и будет размыта при выборе цвета или щелчке вне поля ввода.

Проверьте перо обновления

http://codepen.io/pranesh-r/pen/EgoaGK?editors=0110