javascript - 我正在尝试使用 onClick() 获取单击的按钮项的 ID 并将其发送到另一个组件以在 API 中使用

Question

我想单击电影列表中一部电影的按钮，当我单击该按钮时，它会向我的电影组件发送其 ID，用于获取 API 并显示此特定电影页面，我完成了一半的目标执行 onClick 方法，但我不知道如何将其发送到其他组件并通过 API 正确使用它

这是我的电影列表页面代码，带有按钮:

     NowMovies:[],
      isLoaded:false,
      target_id:null
    }
  }
    componentDidMount(){
     fetch('API')
   .then(data => data.json()).then(({results}) => { this.setState({ isLoaded: true, NowMovies: results })}
   )}

   chosen = id => {
     return() => {
        this.setState({target_id:id})
        console.log(this.state.target_id)

     }
   }
<Link>
          ***<Button onClick={this.chosen(Movie.id)}>Visit</Button></Link>***

当我单击“电影”按钮时，它在控制台中正确地给出了这个结果

我需要将 id 发送到的电影组件:

import NowPlaying from '../Movies/NowPlaying'

export default class Movie extends Component{
constructor(){
  super();
  this.state={
    id:'',
    name:'',
    vote:'',
    date:'',
    image:'',
    time:'',
    genres:[],
    overview:'',
  }

}

   componentDidUpdate(){
     fetch(
     'API').then(data => data.json()).then(results=>{this.setState({name:results.title,vote:results.vote_average,overview:results.overview,date:results.release_date,time:results.runtime,genres:results.genres , image:results.poster_path})}) 
  }

render(){
return( 
  <div>
  <h1>{NowPlaying.target_id}</h1>
  <h2 className='name'>{this.state.name}</h2>
  <img  className='img'   style={{
}} src={`https://image.tmdb.org/t/p/w200${this.state.image}`}></img>
  <h4 className='details'>Realsed on: {this.state.date} rating:{this.state.vote}  runtime:{this.state.time} </h4>
  <p className='overview'>{this.state.overview}</p>
  <p className="submit">
  <label>Add your review</label><br/>
  <input></input><br/><br/>
  <button>Add Comment</button>
  </p>
  </div>
  )
}
}

Answer 1

假设您已正确映射电影列表，并且每个电影列表都可以为您提供 id。我建议使用 react 路由器。您需要使用 react-router-dom 中的 Link 而不是按钮，并在链接内传递 id:

<Link to={'/movie/' + Movie.id}>Visit</Link>

您当然应该为此创建一条路线，例如:

<Route path="/movie/:id" component={MovieDetailsComponent}/>

然后您只需获取 MovieDetailsComponent 中的 id 并获取有关 Movie 的数据。要获取 id，请在 ComponentDidMount() 函数中添加以下内容:

const {id} = this.props.match.params

我也鼓励你阅读更多关于react-router的内容: react-router