Question

我正在使用themoviedb.org API构建电影搜索React应用。为了进行ajax调用来拉动电影列表我需要将输入值作为变量并输入到url，但不知道如何获取属于另一个组件的值。

我已经进行了广泛的在线搜索，但它们主要是指在同一组件内发生的情况，并且不鼓励使用ref。

那么从一个组件获取输入值变量以传递给另一个组件并附加到url末尾的最佳方式（或者至少是最常见或最简单的方法）是什么，而： 1）保持全球空间清洁 2）以“React方式”组织整个应用程序 3）保持组件分离？在这种情况下，React Router是否必要？

   import React from 'react';
   import './App.css';
   import axios from 'axios';


class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log("state value is " + this.state.value);

    var searchValue = this.movieName.value;
    console.log("ref value is "+ searchValue)

    event.preventDefault();
  }


  render() {

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input className="movieName" type="text" ref={(input) => { this.movieName = input; }} value={this.state.value} onChange={this.handleChange} />

        </label>
        <input type="submit" value="Submit" />
        <h1>{this.state.value}</h1>
      </form>
    );
  }
}



class App extends NameForm{  /* I am extending NameForm to get access to input value, but probably coupling components too tight */
    constructor(props) {
      super(props);
      this.state ={
        movie:[]
      };
    }



componentDidMount() { 


  let searchInput = "land"; /* This should be from SearchForm's input value */


let sortByPop = "&sort_by=popularity.desc";
let requestUrl = 'https://api.themoviedb.org/3/search/movie?api_key=f8c4016803faf5e7f424abe98a04b8d9&query=' + searchInput + sortByPop;

  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });



}

render() {

 let baseImgURL = "https://image.tmdb.org/t/p/w185_and_h278_bestv2";
 let posterImgPath = this.state.movie.map(movie => movie.poster_path);


 let posterLink = baseImgURL + posterImgPath;

  return(

      <div className="App">
        <Header />    
       <SearchForm />   

   <div> 
          {this.state.movie.map(movie =>
           <div className="movieTitle">
           <div className="movieCard">
           <img className="posterImg" src= {`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`} alt={movie.title} />
           <div className="searchFilmTitles" key={movie.id}>{movie.title}</div>
           </div>
           </div>
           )} 
      </div>

   </div>
  )
}

}


export default App;

Answer 1

当您的组件附加到页面时，

componentDidMount仅被调用一次。因此，它不是您调用搜索API的正确位置。相反，您应该在每次用户点击“提交”时调用它。按钮。为此，您需要通过将回调方法作为支持传递给SearchForm组件，将handleSubmit触发器冒泡到App组件。此外，您不需要使用ref，因为您已在state中拥有搜索文字。

<强> SearchForm

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    if(this.props.onSubmit && typeof this.props.onSubmit === "function"){
      this.props.onSubmit(this.state.value);
    }
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input className="movieName" type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
        <h1>{this.state.value}</h1>
      </form>
    );
  }
}

应用

class App extends React.Component { /* I'm not sure why you extends NameForm and what NameForm does */ constructor(props) { super(props); this.state = { movie:[] }; this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(value) { let searchInput = value // you get the value of movieName input here let sortByPop = "&sort_by=popularity.desc"; let requestUrl = 'https://api.themoviedb.org/3/search/movie?api_key=f8c4016803faf5e7f424abe98a04b8d9&query=' + searchInput + sortByPop; axios.get(requestUrl).then(response => { this.setState({movie: response.data.results}) }); } render() { let baseImgURL = "https://image.tmdb.org/t/p/w185_and_h278_bestv2"; let posterImgPath = this.state.movie.map(movie => movie.poster_path); let posterLink = baseImgURL + posterImgPath; // I'm not sure why use need above code as you don't use it anywhere return( <div className="App"> <Header /> <SearchForm onSubmit={this.handleSubmit}/> <div> {this.state.movie.map(movie => <div className="movieTitle"> <div className="movieCard"> <img className="posterImg" src= {`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`} alt={movie.title} /> <div className="searchFilmTitles" key={movie.id}>{movie.title}</div> </div> </div> )} </div> </div> ); } }

React：如何从一个组件获取输入值以在另一个组件中进行ajax调用？

1 个答案: