Реакт - событие child onClick не срабатывает при привязке параметров

Моя проблема в следующем.Реакт - событие child onClick не срабатывает при привязке параметров

У меня есть компонент «BookShelf», который содержит список «Книга».
Родитель (книжная полка) управляет в своем состоянии свойством «selectedBook».
При нажатии на одного ребенка (книга), Я хотел бы обновить его родителя selectedBook.
Для этого я использую функцию, определенную в родительских свойствах.
Но этот метод никогда не trigerred (я пробовал с console.log ('что-то'), но она никогда не показывает

Смотрите мой код ниже:.

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

Заранее спасибо !

источник

2016-08-04 OhmWang

Как ваш 'Book' компонент вызывает' onClick'? Вам нужно вызвать 'props.onClick()' явно в компоненте 'Book' – Maxx

Не могли бы вы вставить код для компонента' Book'? –

Возможно, я что-то пропустил. OnClick не запускается только путем добавления его в декларацию книги? – OhmWang

Вот простой пример для вас. Кроме того fiddle

Вы должны передать вам onClick событие как реквизит для дочернего компонента, после того как дочерний компонент получит его, он вызовет обратный вызов и передаст идентификатор в качестве ответа на обратный вызов (как, например, у меня есть).

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Связь между компонентами, это будет полезно для вас.

Благодаря

источник

2016-08-04 14:54:48

Попробуйте way.selected метод Возвращает анонимную функцию.

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

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

Я надеюсь, что это будет способствовать

источник

2016-08-04 15:13:49 tsb

Реакт - событие child onClick не срабатывает при привязке параметров

ответ

Смежные вопросы