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

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

Answer 2

您可以使用通量方法，例如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 3

此方法有效：

在父对象中创建一个方法，该方法必须更改状态父母。
将该方法作为道具传递给孩子。通过子状态方法。
调用该方法时，它将接受子状态作为参数，但会更改父级的状态。

即子状态被发送到父状态。

实时演示：https://zly8w2xp33.codesandbox.io/

反应;父母从孩子那里获取输入数据

3 个答案: