Reagieren Komponente Methode this.state.myState undefiniert nach der Rückkehr von Kind

Question

Ich habe eine übergeordnete Komponente (BookApplication) und eine untergeordnete Komponente (SearchBox) in React. Die SearchBox hat ein Eingabefeld und sollte dem Elternteil die Eingabe zurückgeben, um das Ereignis zu behandeln. Das funktioniert gut, aber wenn ich wieder in der Elternkomponente in der Methode handleSearch bin, ist die this.state... undefined.

TypeError: Cannot read property 'books' of undefined 

Aber searchInput hat den Wert, den es haben sollte. Aber ich brauche die Bücher von this.state.books wieder:/ Ich verstehe, dass in der Methode handleSearch ich in seinem Umfang arbeite, so this.... ist der Kontext von handleSearch ... aber wie bekomme ich die Argumente seiner Komponente die BookApplication wieder? Ich lerne immer noch JavaScript, und ich dachte, das sollte nicht ein Problem sein, weil eine Funktion immer die Variablen des übergeordneten Objekts verwenden kann?

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

Auch hier ist meine 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

Wenn Ihre Frage ist, wie von den Kindern Komponente Eltern Kontext zu erhalten, versucht dann

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

und Sie erhalten ein Fehler hier

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

Da this in der Callback-Funktion nicht auf den Kontext Ihrer Komponente bezogen. Sie sollten

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

in variable Komponente Kontext halten Schließlich Entscheidung ist

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