Возможно ли иметь динамические обработчики событий в React?

Question

Мне сказали, что это очень плохая практика, но мне любопытно узнать, можно ли иметь динамические обработчики в React. Рассмотрим приведенный ниже код. Я хотел бы вызвать соответствующий обработчик на основе значения props. То есть, при нажатии кнопки редактирования щелкнула обработчик редактирования вызывается и т.д. Это не работает прямо сейчас жалуется, что ...expected function but string provided...

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class HelloWorld extends React.Component{ 
    render() { 
     return(
     <div> 
      <h4>Hello World</h4> 
      <MyButton txt="edit" /> 
      <MyButton txt="insert" /> 
     </div> 
     ); 
    } 
}; 

export default class MyButton extends React.Component{ 
    edit() { 
     console.log('edit button clicked'); 
    } 
    insert() { 
     console.log('insert button clicked'); 
    } 
    render(){ 
     return (
      //Trigger handler based on this.props.txt 
      <button onClick={this.props.txt}>{this.props.txt}</button> 
     ) 
    } 
} 
ReactDOM.render(<HelloWorld/>, document.getElementById('hello')); 

Answer 1

Что вы Ware пытается сделать в вашем коде не плохая практика, это на самом деле известный как «Вид контроллера».

Флюсовые приложения имеют три основные части: диспетчер, магазины и виды (реагируют на компоненты). Их не следует путать с Model-View-Controller. Контроллеры существуют в приложении Flux, но они представляют собой представления контроллера - представления, которые часто встречаются в верхней части иерархии, которые извлекают данные из хранилищ и передают эти данные своим детям. Кроме того, создатели действий - вспомогательные методы диспетчера - используются для поддержки семантического API, который описывает все изменения, которые возможны в приложении. Полезно подумать о них как о четвертой части цикла обновления потока. https://facebook.github.io/flux/docs/overview.html

Это позволяет создавать действительно повторно используемые компоненты.

Ошибка, которую вы получаете, потому что вы говорите «нажимаете, делаете» редактируете «», но вы действительно хотите сказать «on click, do edit()», а функция edit является членом класса (поэтому объект this). Я не имею проект право знать, чтобы проверить это, но заменяя

<button onClick={this.props.txt}>{this.props.txt}</button> 

По

<button onClick={this[this.props.txt}]>{this.props.txt}</button> 

Если сделать трюк.

Answer 2

Вы получаете сообщение об ошибке, потому что onClick вы должны передать ссылку на function не String. В этом случае вы можете использовать кронштейн обозначения (this[this.props.txt]), чтобы получить свойство из объекта (MyButton)

class MyButton extends React.Component{ 
    edit(e) { 
    console.log('edit button clicked', e); 
    } 

    insert(e) { 
    console.log('insert button clicked', e); 
    } 

    render() { 
    return <button 
     onClick={ this[this.props.txt] } 
    > 
     { this.props.txt } 
    </button> 
    } 
} 

Example