Реагировать эффективный способ связать событие с многими элементами DOM

Question

Поскольку мы добавим OnClick обработчиков непосредственно к компонентам ... например:

<button onClick={dosomething}>Click</button> 

Есть ли эффективный способ сделать это (не добавляя OnClick к каждому элементу) когда мы имеем дело с десятками элементов?

Например, в моих системообразующих приложений, я бы просто применить обработчик класса:

events: 
'click .someclass': 'doSomething' 

Позвоночник путь кажется намного чище и проще в управлении. Есть ли способ подражать этому поведению с React Components?

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

Answer 1

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

<form onChange={this.handleChange}> 
    {/* ...form elements... */} 
</form> 

... где обработчик события определяет, что делать на основе объекта события .target:

handleChange(e) { 
    this.setState({[e.target.name]: e.target.value}) 
} 

в живом примере, у меня есть <AutoForm> component, который использует эту технику для визуализации <form>, который обрабатывает извлекая данные из измененных полей и представленный для вас форме.

Answer 2

Эта оптимизация не требуется. Это было бы, если бы вы кодировали в других библиотеках, таких как jQuery, но React делает это автоматически для вас.

Цитирую: делегация

Событие: Реагировать фактически не присоединять обработчики событий для самих узлов. Когда React запускается, он начинает прослушивать все события на верхнем уровне с помощью одного прослушивателя событий. Когда компонент монтируется или размонтируется, обработчики событий просто добавляются или удаляются из внутреннего сопоставления. Когда происходит событие, React знает, как его отправить, используя это сопоставление. Когда в отображении не осталось обработчиков событий, обработчики событий React являются простыми no-op. Чтобы узнать больше о том, почему это быстро, см. David Walsh's excellent blog post.

Видел здесь: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html