Question

我有一个父组件，我想从中将功能发送给我的子组件。

ParentComponent.js

export default class LandingPage extends React.Component {

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

    render() {
        return ( 
          <div>

            <div className = "admin" >
            <SearchBar onSubmit = {this.onSearchSubmit}
            /> 
            </div>
             ....

ChildComponent.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>
        )
    }
}

我正在向子组件发送函数，因此我可以使用搜索栏从用户那里获得输入回到父组件。如果子组件在父组件上显示并使用，则效果很好。

但是，如果我想通过使用CSS将其从父组件隐藏起来的方式来访问子组件：

.admin{
      display: none;
    }

并像http://localhost:3000/bar一样访问它，然后在搜索栏中输入文字，我遇到以下错误：

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

是否可以使用ReactJs这样发送数据，或者是否有其他方法可以将数据发送到子组件而不在父级中显示子组件？

更新-工作解决方案

我为两个页面都添加了父组件。

我以这种方式更改了应用程序的结构。

在构建应用程序之前，我的LandingPage.js是SearchBar.js的父项。

这就是为什么我无法按照我想要的方式来使它们之间的通信起作用。我试图通过在目标网页上隐藏搜索栏，并试图将数据从http://localhost:3000/searchbar发送到http://localhost:3000/来进行黑客攻击，而没有任何运气和出错。

在构建我的应用程序tp之后，就像这样：

我能够在LandinPage.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。

Answer 1

由于您不希望两个组件之间都具有父子关系，因此如何将它们设置为兄弟姐妹并为两个组件添加父组件！

使用SearchBar组件进行的任何搜索，都可以将其传递给新的父级，也可以传递给先前考虑的父级。

是否可以将功能从父组件发送到ReactJs中的隐藏子组件

1 个答案: