2

Имеется собственный компонент на базе Button. И еще один компонент, который содержит эту кнопку. На странице расположены несколько таких больших компонентов с кнопками внутри. Для каждой из этих кнопок имеется функция, которая должна вызываться по клику на кнопку. Но как передать эти функции в компоненты? Напрямую не получается.

Вот нашла объяснение https://facebook.github.io/react/docs/events.html#event-pooling, но ничего не поняла. Что конкретно надо сделать?

1
  • Приведите пример вашего "напрямую".
    – user181100
    28 апр 2016 в 10:28

2 ответа 2

0
class Component2 extends Component {
    handleClick = () =>{
      this.props.handleFunction()
    }

    render() {
      return(
        <TouchableOpacity onPress={this.handleClick}>
          /*btn*/
        </TouchableOpacity>
      )
    }
}

class Component1 extends Component {

  handleFunction = () => {
    /*some code*/
  }     

  render() {
   return (
     <Component2
       handleFunction={this.handleFunction}
     />
   )
  }
}
-1

Функции в компонент передавать не нужно. Нужно объявлять функции-обработчики внутри компонентов. Именно для этого нужны компоненты, - чтоб хранить всю логику обработки действий над компонентом в одном месте.

Вы так же можете выполнять разные функции, в зависимости от того, какой тип компонента был потревожен. Для этого вам нужно передать в компонент НАЗВАНИЕ необходимой функции.

Выглядеть это может приблизительно так:

var Button = React.createClass({
    handler1: function() {
        // do something
    },

    handler2: function() {
         // do something else
    },

    render: function() {

        return (
            <button onClick={eval("this." + this.props.handler)}>
                {this.props.name}
            </button>
        );
    }

});

При этом в момент рендеринга кнопки нужно указать, какой обработчик будет вызван:

<Button name="someName" handler="handler1" />

Вариант работает, - проверил.

Может есть какие-то более простые и лаконичные решения - предлагайте! ;)

4
  • @Qwertiy предложите свой вариант?
    – Razzwan
    7 мая 2016 в 15:03
  • 2
    Чем eval("this." + nameOfButtonFunction + "()"); лучше чем this[nameOfButtonFunction]();? И вообще, я так и не понял, почему передать имя проще, чем передать функцию?
    – Qwertiy
    7 мая 2016 в 20:26
  • @Qwertiy Удобно, чтоб функция-обработчик находилась внутри самого объекта, - в этом суть использования ООП подхода. Тогда тебе не придется шарить по всему проекту, чтоб понять, что делает та функция, которая передается внутрь объекта, а все будет находиться в одном месте. eval ничем не лучше, - можно как угодно, если работает. В идеале, передаваться должно не имя функции, а тип объекта, т.е. только то, что отличает этот объект от других.
    – Razzwan
    8 мая 2016 в 11:16
  • @Qwertiy, передать имя не проще, а более удобно. Чтоб собрать все функции, которые должны обрабатывать одно и то же событие в одном месте, вместо того, чтоб разбрасывать их по проекту.
    – Razzwan
    8 мая 2016 в 11:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.