Question

我的问题如下。

我有一个＆＃34; BookShelf＆＃34;包含＆＃34; Book＆＃34;名单。
父母（书架）管理其状态a＆＃34; selectedBook＆＃34;属性。
点击一个孩子（书）时，我希望更新其父 selectedBook 属性。
为实现这一目标，我使用了父属性中定义的函数。
但是这种方法永远不会被攻击（我尝试使用console.log（＆＃39;某些东西＆＃39;）但它从未显示过。

请参阅下面的代码：

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>
}

提前致谢！

Answer 1

这是一个简单的例子。另外fiddle

你应该将你的onClick事件作为道具传递给子组件，一旦子组件获得它，它将调用回调并将id作为agrument传递给回调（如下所示）。

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'));

另外，我建议您查看此article 组件间通信，它对您有用。

由于

Answer 2

尝试这种方式。选择方法返回匿名函数。

<Book onClick={this.selectBook(index)} data={book} key={index} />

 selectBook (index){
	   return ((() => {
			console.log(" selectBook fired" );
			component.setState({selectedBook:index}); 
			  }).bind(component,index))
	  
  }

我希望这会有所帮助

React - 绑定参数时，不会触发子onClick事件

2 个答案: