Реактивный компонентный метод this.state.myState undefined после возвращения из дочернего объекта

Question

У меня есть родительский компонент (BookApplication) и дочерний компонент (SearchBox) в реактиве. В поле SearchBox есть поле ввода и он должен возвращать родительский элемент для обработки события. Это работает нормально, но когда я вернусь в родительский компонент в методе handleSearch, значение this.state... не определено.

TypeError: Cannot read property 'books' of undefined 

Но searchInput имеет значение, которое оно должно иметь. Но мне нужны книги из this.state.books снова:/ Я понимаю, что в методе handleSearch я работаю в его области, поэтому this.... - это контекст handleSearch ... но как я могу получить аргументы его компонента BookApplication еще раз? Я все еще изучаю javascript, и я думал, что это не должно быть проблемой, потому что функция всегда может использовать переменные своего родительского объекта?

class BookApplication extends React.Component { 

    constructor() { 
     super(); 
     this.state = {books: []}; 
    } 

    componentDidMount() { 
     $.get(PATH, function (result) { 
      this.setState({ 
       books: result 
      }); 
     }.bind(this)); 
    } 

    handleSearch(searchInput) { 
     //Sort the books list 
     var sortedList = []; 
     this.state.books.map(
      function (currentBook) { 
       currentBook.keys().forEach(
        function (key, pos) { 
         if (key.contains(searchInput)) { 
          sortedList.push(currentBook) 
         } 
        } 
       ) 
      } 
     ); 
    } 

render() { 
     return (
      <div> 
       <SearchBox onSearch={this.handleSearch}/> 
       <div className="book-list"> 
        {this.state.books.map(function (currentBook) { 
         return <Book book={currentBook} key={currentBook.id}/>; 
        }) } 
       </div> 
      </div> 
     ); 
    } 

Вот и мой SearchBox:

class SearchBox extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {searchFieldInput: ''}; 
    this.handleSearchChange = this.handleSearchChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

handleSearchChange(event) { 
    this.setState({searchFieldInput: event.target.value}); 
} 

handleSubmit(e) { 
    //Prevent the browser's defeault action of submitting the form 
    e.preventDefault(); 

    var searchFieldInput = this.state.searchFieldInput.trim(); 
    //Call the passed callback function 
    this.props.onSearch({searchFieldInput: searchFieldInput}); 
} 

render() { 
    return (
     <div className="book-search"> 
      <input 
       type="text" 
       value={this.state.searchFieldInput} 
       onChange={this.handleSearchChange} 
       placeholder="Search..." 
       className="search-bar" 
      /> 
      <button onClick={this.handleSubmit} className="search-button">Search</button> 
     </div> 
    ); 
} 

}

Answer 1

Если ваш вопрос заключается в том, чтобы получить контекст родителя от ребенка компонента, то попробуйте

class ParentComponent extends React.Component { 
    ... 
    ... 
    clickHandler(event){} 

    render(){ 
     <ChildComponent parent={this}/> 
    } 
} 

class ChildComponent extends React.Component { 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let parent = this.props.parent; 
     return <button onClick={parent.clickHandler}></button> 
    } 
} 

И вы получите здесь

componentDidMount() { 
    $.get(PATH, function (result) { 
     this.setState({ 
      books: result 
     }); 
    }.bind(this)); 
} 

Потому что this в функции обратного вызова не ссылается на контекст вашего компонента. Вы должны иметь контекст компонента в переменной

componentDidMount() { 
    let self = this; 
    $.get(PATH, function (result) { 
     self.setState({ 
      books: result 
     }); 
    }.bind(this)); 
} 

Наконец решение

constructor(props) { 
    super(props); 
    this.state = {books: []}; 
    //add the following line into your code 
    this.handleSearch = this.handleSearch.bind(this); 
}