[英]React - Child onClick event doesn't trigger when binding parameters
My problem is the following.我的问题如下。
See my code below :请参阅下面的代码:
setSelectedBook(index) {
this.setState({
selectedBook: index
})
},
getInitialState() {
return {
books: [],
selectedBook: null
}
},
componentDidMount() {
let component = this
$.ajax({
url: 'data/books.json',
success (data) {
component.setState({
books: data
})
},
error (err) {
console.log(err)
}
})
},
render() {
let component = this
var bookList = this.state.books.map(function(book, index) {
let selectBook = component.setSelectedBook.bind(component, index)
return (
<Book onClick={selectBook} data={book} key={index} />
)
})
return <div className="book-shelf">
{bookList}
</div>
}
Thanks in advance !提前致谢!
Here is a simple example for you.这是一个简单的例子。 Also
fiddle
还有
fiddle
You should pass your onClick
event as a props to child component, once child component gets it, it will call a callback and pass an id as an agrument to the callback (like i have below).您应该将您的
onClick
事件作为道具传递给子组件,一旦子组件获取它,它将调用回调并将 id 作为参数传递给回调(如下所示)。
class Book extends React.Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.props.click(this.props.id)
}
render(){
return <li onClick={this.handleClick}>{this.props.id} - {this.props.name}</li>
}
}
class BookShelf extends React.Component{
constructor(){
super();
this.onClick = this.onClick.bind(this)
}
onClick(id){
console.log(id)
}
render(){
return <ul> // of course you may use Array.map functions, it's just for example
<Book click={this.onClick} id={1} name={'hello'}/>
<Book click={this.onClick} id={2} name={'world'}/>
</ul>
}
}
React.render(<BookShelf />, document.getElementById('container'));
Also i suggest look at this article Communicate Between Components , it will be useful for you.另外我建议看看这篇文章在组件之间通信,它对你很有用。
Thanks谢谢
select method return anonymous function as value. select 方法返回匿名函数作为值。
<Book onClick={this.selectBook(index)} data={book} key={index} />
selectBook (index){ return ((() => { console.log(" selectBook fired" ); component.setState({selectedBook:index}); }).bind(component,index)) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.