Question

我将从登录页面发送功能到搜索栏页面。

LandingPage.js

export default class LandingPage extends React.Component {

   onSearchSubmit(term){
    console.log(term);
   }

    render() {
        return (
            <div>
            <div><SearchBar onSubmit = {this.onSearchSubmit} /></div>
            </div>
            ......

SearchBar.js

export default class SearchBar extends React.Component{

    state = {term: ''};

    onFormSubmit = event => {
        event.preventDefault();

        this.props.onSubmit(this.state.term);
    };

    render(){
        return(
            <div>
                <div className="container">

                    <div className="searchBar mt-5">
                        <form onSubmit={this.onFormSubmit}>
                            <div className="form-group">
                            <label for="search">Image search</label>
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    placeholder="Search..." 
                                    value = {this.state.term}
                                    onChange={e => this.setState({term: e.target.value})}
                                />
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        )
    }
}

我的目标网页（在本例中为父网页）位于http://localhost:3000/上，当我在目标网页的搜索栏中输入内容时，效果很好。

但是当我转到http://localhost:3000/searchbar并输入时，出现以下错误

Uncaught TypeError: _this.props.onSubmit is not a function

更新：

我尝试添加绑定，但仍然无法正常工作。如果我这样搜索着陆页上的搜索栏，它就会起作用。

但是我的问题是，我是否只进入http://localhost:3000/searchbar

上的搜索栏页面

http://localhost:3000/上的着陆页是否可以发回数据？

我仍然遇到相同的错误。

我的问题是，ReactJS甚至有可能通过不同URL的子页面将数据发送回父页面吗？

Answer 1

这是与事件回调中this关键字的范围有关的问题。为了克服这个问题，您需要将函数绑定到组件的构造函数中。在React网站上检查官方文档：https://reactjs.org/docs/handling-events.html

您可以通过在构造函数中添加以下绑定来解决您的问题。

// This binding is necessary to make `this` work in the callback
this.onFormSubmit = this.onFormSubmit.bind(this);

Answer 2

问题与您的onSearchSubmit范围有关。

为此，您有2个选择。

像这样在构造函数中绑定onSearchSubmit函数

constructor(props) {
  super(props);
  this.onSearchSubmit = this.onSearchSubmit.bind(this);
}

第二个选项，不使用范围绑定：将onSearchSubmit更改为箭头功能。

export default class LandingPage extends React.Component {

  onSearchSubmit = term => {
    console.log(term);
  }

  render() {
    return (
        <div>
        <div><SearchBar onSubmit = {this.onSearchSubmit} /></div>
        </div>
        ......

Answer 3

要保留样式，请将onSearchSubmit函数设置为箭头函数：

  onSearchSubmit = term => {
    console.log(term);
  }

在这里，您可以找到为什么要在其中使用箭头功能或替代方法（绑定this）： React.js and arrow functions vs normal functions [duplicate] Ask

Answer 4

解决方案：

最适合我的解决方案是将App.js的父页面以及LandingPage.js和SearchBar.js的页面设为子页面。

App.js 看起来像这样：

export default class App extends React.Component{

  render(){
    return(

    <div>
      <Route path="/" exact component={LandingPage} />
      <Route path="/admin" component={Admin}/>
      <Route path="/posts" component={Post} />
      <Route path="/categories" component={Categories} />
      <Route path="/users" component={Users} />
      <Route path="/details" component={Details} />
      <Route path="/profile" component={Profile} />

      <Route path="/weatherapp" component={weatherApp} />
      <Route path="/bar" component={SearchBar}/>
    </div>
  )
 }
}

要使App.js作为父级，请将其更改为如下形式：

App.js

export default class App extends React.Component{

  constructor(props){
    super(props)
    this.state = {
        articalName: "Landing page"
    };

}

onSearchSubmit = term => {
  console.log(term);
}


  render(){
    return(

    <div>
      <Route path="/" exact component={LandingPage} />
      <Route path="/admin" component={ () => 
        <Admin 
          title={this.state.articalName}

          />}  
      />
      <Route path="/posts" component={Post} />
      <Route path="/categories" component={Categories} />
      <Route path="/users" component={Users} />
      <Route path="/details" component={Details} />
      <Route path="/profile" component={Profile} />

      <Route path="/weatherapp" component={weatherApp} />
      <Route path="/bar" component={ () => 
        <SearchBar 
          onSubmit={this.onSearchSubmit}

          />}  
         />
    </div>
  )
  }
}

我使用路由将数据从父级发送到子级。

所以我的应用程序的基本结构现在看起来像这样：

而不是以前的样子：

我已将状态存储在父组件中，并将状态传递给子组件。此示例使用React Router4。我只想使用ReactJs，但我想好的解决方案也应该是Redux。

无法提交表格-ReactJs

4 个答案: