React;家長從小孩那裏獲取輸入數據

Question

我正在製作一個React應用程序，它從下拉菜單中獲取用戶輸入，根據輸入值進行api調用並顯示結果。組件的結構是這樣的。

Search 
    Input 
    Result 

所以，Search是Input和Result組件的父。我想將Input中的值傳遞到發生調用的地方Search。然後電話的結果傳遞給Result（令人驚訝的是）。

我可以在Search中爲api調用硬編碼值，結果顯示正常。

但我無法弄清楚如何將輸入字段的值從Input傳遞到Search。我認爲我應該從Search訪問孩子（輸入）道具，但我不知道如何設置它們，因爲您不打算讓組件設置它自己的道具。

我知道這是錯誤的，但我至今是：

let Input = React.createClass ({ 

    componentDidMount(){ 
    this.props.genre = this.refs.genre.value; 
    // or this.state.genre = this.refs.genre ? 
    }, 

    render() { 
     return <div> 
     <select ref="genre"> 
     <option value="28">Action</option> 
     <option value="12">Adventure</option> 
     <option value="16">Animation</option> 
     <option value="35">Comedy</option> 

     <option value="37">Western</option> 
     </select> 

     <select> 
     <option ref="rating" type="text" placeholder="Rating"/> 
     </select> 

     <select> 
     <option ref="type" type="text" placeholder="Type"/> 
     </select> 

     <input type="submit" value="Submit"/> 
    </div> 
    } 
}); 

export default Input; 

和Search

let Search = React.createClass ({ 
    getInitialState(){ 
    return { 
     movies: ['Men In Black'] 
    }; 
    }, 

    componentDidMount(){ 

    let genre = this.props.genre || ''; 
    let url = `http://theapi.org/3/discover/movie?${key}&with_genres=${genre}`; 
    Request.get(url).then((response) => { 
     console.log('response.body.results', response.body.results) 
     this.setState({ 
     movies: response.body.results.map(function(movie){ 
      return movie.title 
     }) 
     }); 
    }); 
    }, 

    render(){ 
     console.log(this.state.movies) 
     return (
     <div> 
      <Input/> 
      <ul> 
      {this.state.movies.map(function(movie){ 
       return <Results key={movie.id} data={movie}/>; 
      })} 
      </ul> 
     </div> 
    ); 
    } 
}); 

export default Search; 

我希望你能看到什麼，我想在這裏做。它並不覺得這很困難，但是我對React的道具和狀態的掌握是基本的，甚至在閱讀完文檔之後，我需要一些解釋。

我想我的問題是，我應該將數據分配給孩子的道具還是狀態，以及如何從父級訪問它？

Answer 1

您可以使用助焊劑方法，例如https://github.com/reflux/refluxjs或https://github.com/reactjs/redux作爲最佳方法。另一種方式，即使更醜陋的是將功能作爲道具來傳遞。

例如添加像這樣以搜索

callBackExample(value) { 
    this.setState({value: value}); 
}, 

render() { 
    ... 
    <Input cb = {this.callBackExample.bind(this} /> 
    ... 
} 

然後輸入可以使用此

this.props.cb(value) 

將值傳遞迴

Answer 2

只要記住這時候你創建了輸入子組件它是否需要跟蹤組件內的狀態？如果不是，則不需要在子組件中調用componentDidMount。只是值傳遞它到子組件內的父像以下

let Input = React.createClass ({ 

selectHandler(){ this.props.cb(value) } 

render() { 
    return <div> 
    <select onClick ={this.selectHandler.bind(this)} ref="genre"> 
    <option value="28">Action</option> 
    <option value="12">Adventure</option> 
    <option value="16">Animation</option> 
    <option value="35">Comedy</option> 

    <option value="37">Western</option> 
    </select> ........