Reactコンポーネントメソッドthis.state.myStateは、子から返された後で未定義です。

Question

Reactに親コンポーネント（BookApplication）と子コンポーネント（SearchBox）があります。 SearchBoxには入力フィールドがあり、イベントを処理するために親に入力を戻す必要があります。それはうまくいきますが、メソッドの親コンポーネントに戻るときhandleSearchthis.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> 
     ); 
    } 

私のサーチ：

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は、コンポーネントのコンテキストを参照していないためです。 //facebook.github：あなたは最後の決定は

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