javascript - react ；父级从子级获取输入数据

Question

我正在使用 React 制作一个应用程序，它从下拉菜单中获取用户输入，根据输入的值进行 api 调用并显示结果。组件的结构是这样的。

Search
    Input
    Result

因此，Search 是 Input 和 Result 组件的父组件。我想将值从 Input 传递到发生调用的 Search。然后调用的结果被传递给Result(令人惊讶的是)。

我可以在 Search 中对 API 调用的值进行硬编码，结果显示正常。

但我无法弄清楚如何将输入字段的值从 Input 传递到 Search。我认为我应该从 Search 访问子(输入) Prop ，但我不知道如何设置它们，因为您不应该让组件设置它自己的 Prop 。

我知道这是错误的，但到目前为止我所得到的是:

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;

和搜索

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 的 props 和 state 的掌握是基本的，即使在阅读了文档之后我也需要一些解释。

我想我的问题是，我是否应该将数据分配给 child 的 Prop 或状态，以及如何从 parent 那里访问它？

Answer 1

只要记住这一点，当您创建像输入这样的子组件时，它是否需要跟踪组件内的状态？如果没有，则不需要在子组件中调用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> ........