Совершенно новый для React Js, так что терпите меня ...
Я использую onClick в дочернем компоненте, чтобы изменить состояние родительского компонента. Родительским состоянием является логическое значение, которое, в свою очередь, используется для включения и выключения класса на отдельном элементе из того, по которому щелкнули. Примерно так:
In Parent.js (только соответствующий код):
constructor(props) {
super(props);
this.state = {
elementOpen: false;
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
elementOpen: !this.state.bucketListOpen
})
}
render() {
return (
<Child
className = {this.state.elementOpen ? "open" : "closed"}
toggleClassName = {this.handleClick}
/>
)
}
В Child.js (только соответствующий код):
render() {
return (
<div>
<div className={this.props.className}>Test</div>
<a onClick={this.props.toggleClassName}>Click Me</a>
</div>
)
}
... и это прекрасно работает. Нет проблем. Проблема возникает, когда я хочу переместить {this.props.toggleClassName} в дочернем компоненте в функцию обработки (причина в том, что я могу запустить более одного события при нажатии). Короче перестает работать.
Я попытался создать метод в компоненте Child и поместить в него метод следующим образом:
handleClassSwitch() {
return this.props.toggleClassName;
}
render() {
return (
<div>
<div className={this.props.className}>Test</div>
<a onClick={this.handleClassSwitch}>Click Me</a>
</div>
)
}
... но, к сожалению, это не работает, и я в тупике. Наверное, действительно очевидно, но я борюсь здесь. Любая помощь приветствуется.