Javascript 如何在React中将参数从搜索框传递到获取url

我有两个有状态的组件——SearchBox和FetchMusic。我的计划是让SearchBox组件接收来自用户的输入，并将其传递到我的FetchMusic组件中的一个FetchURL（使用模板字符串）。我的代码如下

import React, { Component } from 'react';

class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({value: e.target.value});
  }
  handleSubmit = (e) => {
    e.preventDefault();
    let userInput = this.state.value;
    this.props.onSearchBox(userInput); 
    console.log(`You searched for the movie ${userInput}`);      
  }

  render() {
    return (
      <div className="search-container">
        <form className="form-search" onSubmit={this.handleSubmit}>
          <input 
            type="text" 
            value={this.state.value}
            onChange={this.handleChange}
            placeholder="Search Movie Title..."
          />
        </form>
        <h5>{this.state.value}</h5>
      </div>
    );
  }
}

export default SearchBox;

import React，{Component}来自'React'；
类SearchBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=（e）=>{
e、 预防默认值（）；
this.setState（{value:e.target.value}）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
让userInput=this.state.value；
this.props.onSearchBox（用户输入）；
log（`yousearkeforthemovie${userInput}`）；
}
render（）{
返回(
{this.state.value}
);
}
}
导出默认搜索框；

import React，{Component}来自'React'；
从“./SearchBox”导入搜索框；
类FetchMovie扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoad:false，
数据：[]
};
}
componentDidMount（）{
常量fetchConfig={
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
};
取回(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${}`，fetchConfig）
.then（res=>res.json（））
.然后（电影=>{
这是我的国家({
isLoad:false，
资料来源：电影
});
},
（错误）=>{
这是我的国家({
isLoad：是的，
错误
});
}
)
// }
}
render（）{
const{error，isLoad，data}=this.state；
如果（错误）{
返回(
错误：{console.log（Error.message）}
);
}else if（isLoad）{
返回(
{console.log（'Loading….'）}
);
}否则{
返回(
标题：{data.Title}
参与者：{data.Actors}
年份：{data.Year}
运行时：{data.Runtime}
额定：{data.Rated}
绘图：{data.Plot}

{console.log（data.Title+''+data.Actors）}
);
}    
}
}
导出默认电影；

从“React”导入React；
导入“/App.css”；
从“./components/NavBar”导入NavBar；
从“./components/SearchBox”导入SearchBox；
从“./components/FetchMovie”导入FetchMovie；
函数App（）{
返回(
,
);
}
导出默认应用程序；

当我在输入框上写入并单击Enter时，我收到一条错误消息，消息如下：

“TypeError:this.props.onSearchBox不是函数 搜索框/this.handleSubmit“

---

非常感谢你的帮助

有几件事需要纠正：

在

应用程序

组件的JSX中使用

时，您没有传递名为

onSearchBox

的道具

在

FetchMovie

组件中，URL是错误的，因为您应该放置搜索字符串，而不是组件本身

大概是这样的：

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${enteredString}`

不是

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${}`

您应该在

App

组件中维护一个新状态，以处理输入的搜索字符串的状态（将其传递给

FetchMovie

组件），并检查它是否已提交以显示

FetchMovie

组件

---

为什么要将搜索框组件放在获取url中？组件应该只呈现，而不是像函数一样使用。这并不是你认为它正在做的事情。发生错误的原因是，在你的应用组件中，你没有将onSearch box属性传递给它。@SpeedOfRounds感谢你的贡献。谢谢你的回答.但是我现在如何从搜索框中获取值呢？@Chinonso-关于在组件之间传输数据有很多问题。请仔细查看。

import React from 'react';
import './App.css';
import NavBar from './components/NavBar';
import SearchBox from './components/SearchBox';
import FetchMovie from './components/FetchMovie';
function App() {
  return (
    <>
      <NavBar />,
      <SearchBox />
      <FetchMovie />
    </>
  );
}

export default App;

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${enteredString}`

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${<SearchBox onSearchBox={this.handleSubmit} />}`