無法提交表格-ReactJs

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更改為arrow函數。

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和箭頭的功能與正常的功能[DUPLICATE]問

Answer 4

解：

對我App.js解決方案是將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。