Как повесить событие на компонент?

Question

[Aleksey100]

На странице используется компонент ButtonBorder ,

<div className='chat-settings__options'>
          <ButtonBorder value='Классика' />
          <ButtonBorder value='Модерн' />
          <ButtonBorder value='Без дизайна' />
</div>

подскажите как можно повесить на него обработчик события, например onClick?
Если делать как обычно

<ButtonBorder onClick={/*функция*/} value='Классика' />

, то получается что она просто как props передается в компонент, а не обрабатывается

Comments

[Петр Мухуров]

constructor() {
  this.handlerClick = ::this.handlerClick;
...

handlerClick() {
//action
} 

render() {
  const {
    handlerOnClick,
    ...other
  } = this.props;

  return (
    <button onClick={this.props.handlerOnClick|| this.handlerClick} {...other} />
...

а через props передавать хандлеры событий - нормально, например, чтобы отловить на родителе событие в чайлде

Answer 1

[Павел Корнилов]

Повесьте на div className='chat-settings__options, а делегированием уже опеределяйте целевой объект.
В примитиве так:

<div onclick="handler();" className='chat-settings__options'>
	<ButtonBorder value='Классика' />
	<ButtonBorder value='Модерн' />
	<ButtonBorder value='Без дизайна' />
</div>

<script>
	function handler (e) {
		var t = e.target;
		switch (t.value) {
			case 'Классика':
				// Что-то делаем
				break;
			// etc...
			default:
				// Если ничего не подошло
				break;
		}
	}
</script>

Comments

[ой всё]

уже лет 15 как не пишут код в html

[Павел Корнилов]

ой всё, ну и что? Зато это всегда был самый кроссброузерный способ навешивания обработчиков.
И я указал, что это примитивный вариант, который можно уже доработать по своим предпочтениям.

[Павел Корнилов]

ой всё, кстати, react сам по себе такая жуткая смесь вёрстки и кода, которую я сам не перевариваю.

[ой всё]

KorniloFF, до тех пор пока ничего больше хэллоу ворлд в этом обработчике делать не надо

[Павел Корнилов]

ой всё, да, а точнее, если не нужно навесить несколько обработчиков на одно событие.

[ой всё]

KorniloFF, это не обработчики надо навешивать на события, а события перечислять в обработчиках

Answer 2

[Сергей Сунцев]

Вот у вас есть родительский компонент, в котором есть событие

export default class App extends Component {	
	render() {
		return (
			<ButtonBorder onCustomClick={this.handleClick} value='Классика' />
		)
	}
    handleClick(){
        console.log('action')
    }
}

И дочерний, в котором мы получаем событие

export default class ButtonBorder extends Component {	
        const {onCustomClick, value } = this.props;
	render() {
		return (
			<button onClick={onCustomClick} >{value}</button>
		)
	}
}

Comments

[Aleksey100]

Я так и делал сначала, но кнопка ButtonBorder много где используется. Не хочется передавать в нее кучу функций и внутри нее их обрабатывать. Хочется что бы была кнопка с минимальным набором состояний и функций которые необходимы только для нее, а все остальные функции находились в том компоненте, где они будут использоваться.

Или такой подход не правильный?

[Сергей Сунцев]

используйте ... оператор

[Сергей Сунцев]

export default class App extends Component {	
  render() {
    const {...others} = this.props
    return (
      <ButtonBorder {...others} />
    )
  }
    handleClick(){
        console.log('action')
    }
}

[Сергей Сунцев]

ой всё, это просто пример вырванный из контекста

[Сергей Сунцев]

ой всё, я не хочу с вами спорить, понятное дело не буду называть компонент - приложением, тут вопрос был совсем не в этом. Если я переименую класс App в Form, смысл ответа не будет другим.

[Сергей Сунцев]

ой всё, но меня радует, что в мире есть люди более занудливые, чем я)

[davidnum95]

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

[Сергей Сунцев]

ой всё, Иногда такие задачи бывают, что на придумывание названия компоненту уходит больше времени, чем на его написание

[ой всё]

Сергей Сунцев, тогда вы неправильно определяете компоненты
назовите ваш компонент компонентом или элементом, и будет вам счастье

простой тест: что здесь является компонентом и что является родительским элементом:
- небольшая форма: имя клиента, емейл клиента, кнопка отправки формы

Answer 3

[Warden]

<ButtonBorder onClick={() => {/*функция*/}} value='Классика' />

Попробуй так.