React — как реализовать вызов родительской функции?

Question

[Антон Измайлов]

Возник вопрос. Никак не могу добиться его работоспособности

У меня есть 2 компонента

Parent Component:

<Children 
  info={this.props.info}
  hire={(id) => () => {console.log('testing')}}
/>

И Children Component:

<button onClick={this.handleClick(), this.props.hire(id)} }>Bla</button>

Но данная конструкция не работает (не отправляется запрос к props.hire, если действия в онлклике поместить в function().bind(this); - тоже не вариант, перестают работать оба вызова, если вызывать this.props непосредственно в handleClick() { } то, тоже никакой реакции.
Кто-нибудь сталкивался с таким? Есть решение?

Дополняю код оригиналом.

Вот Parent:

{this.props.workers && this.props.workers.map( (worker) => {
            return (<div className="large-4 column"><Worker
            info={worker}
            selected={false}
            hire={(id) => () => {console.log('and here ' + id)}}
            /></div>);
          })}

А вот как я вызываю это дело в child'e

<div style={{cursor: 'pointer'}} onClick={function bla() {this.handleColor(); hire(5); console.log('function');}.bind(this)}>

Comments

[Андрей Антропов]

Это какой-то очень странный код можете несколько больше его привести для понимания

[Антон Измайлов]

Андрей Антропов: дополнил ответ.

Answer 1

[Андрей Антропов]

Формально получается что у вас один уровень вложенности функций лишний, есть есть ожидание что при вызове hire(5) должно что-то упасть в консоль, то
(id) => {console.log('and here ' + id)
либо

this.handleColor(); 
hire(5)(); 
console.log('function');

Нужно использовать

Comments

[Антон Измайлов]

Спасибо, действительно упустил такую мелкую деталь. Плюс в вашу карму ^_^

Answer 2

[Константин Китманов]

В Parent все верно, а в Children можно так сделать:
В render: onClick={this.onClick.bind(this)}

и такой метод:

onClick () {
    this.props.hire();
}

Comments

[Антон Измайлов]

Пробовал и так. Если видите, то в child'e вызывается handleColor, туда пробовал запихать this.props.hire() и никакой реакции, он его просто не замечает :(

[Константин Китманов]

Антон Измайлов: все-таки попробуйте выкинуть все лишнее и сделать так. Скорее всего, где-то какая-то ерунда типа опечатки, лишней запятой или недостающей точки с запятой. То, что я привел — это работает.

[Антон Измайлов]

Константин Китманов: handleColor(id) {
return () => {
console.log('test hire here')
this.props.hire(id);
this.setState({selected: !this.state.selected})
}
}

Один бок - не работает.

[Константин Китманов]

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

[Антон Измайлов]

Константин Китманов: вы про бинды? Если оставить голую функцию аля handleColor() { this.props.hire() } то она работать тоже не будет. this биндится у меня в constructor'e