ReactJS 搜索栏子到父

Question

我有一个可以在项目的所有页面上查看的搜索栏组件。有没有一种方法可以让我拥有相同的搜索栏组件，但有一个我可以传递的属性，以便它知道要搜索哪些数据。我的搜索组件是<SearchBar type="PASS THIS VALUE" />，它被渲染了：

import React, { Component } from 'react';

class SearchBar extends Component {
  render () {


function handleClick(e) {
  e.preventDefault();
  console.log("Clicked!!!");
}
return (
<div className="row main-search">
  <div className="column">
    <form action="">
        <fieldset>
          <label htmlFor="search">
            <input type="text" placeholder="Start typing..." id="search-box" />
          </label>
        </fieldset>
      </form>
  </div>
  <div className="column">
    <div className="float-right"><button className="add-new" onClick={handleClick}>Add New</button></div>
  </div>
</div>
  )
 }
}

export default SearchBar;

如果这不可能，是否有办法让 searchBar 知道用户在哪个页面上并知道要搜索哪些数据？

更新： 我正在使用路由器元素，searchBar 组件位于父 App.js 内。我正在使用这样的路由器：

<SearchBar />
        <Route
          exact path="/" children={({ match, ...rest }) => (
            <TransitionGroup component={firstChild}>
              {match && <TourList {...rest} />}
            </TransitionGroup>
        )}/>

Answer 1

你可以通过this.props访问props并相应地设置input的值，但要注意组件会被react flow控制，你将无法更改输入，因此你需要@987654323 @ 事件处理程序并控制该道具的本地状态版本。

可能是这样的：

import React, { Component } from 'react';

class SearchBar extends Component {
  state = { // pass default value from "type" prop
    type: this.props.type
  };
  // making sure we don't call setState excessively
  // as per https://reactjs.org/docs/react-component.html#componentwillreceiveprops
  componentWillReceiveProps(nextProps) {
    
    if (nextProps.type !== this.props.type) {
      this.setState({ type: nextProps.type });
    }
  }
  
  // pulling out handleClick function from render()
  // to avoid creating it on every render call
  handleClick = (e) => {
    e.preventDefault();
    console.log("Clicked!!!");
  }
  
  // making sure we update our controlled component state
  // so we can actually type and get the change back in the value
  // more info here: https://reactjs.org/docs/forms.html#controlled-components
  handleChange = e => {
    this.setState({ type: e.target.value });
  };
  
  render () {
    return (
      <div className="row main-search">
        <div className="column">
          <form action="">
              <fieldset>
                <label htmlFor="search">
                  <input type="text" 
                    placeholder="Start typing..." 
                    id="search-box"
                    onChange={this.handleChange}
                    // listening for our local and controlled version
                    // of "type" prop that is now reacting both to
                    // parent prop change and to local input change through typing
                    value={this.state.type}/>  
                </label>
              </fieldset>
            </form>
        </div>
        <div className="column">
          <div className="float-right">
            <button className="add-new" onClick={handleClick}>Add New</button>
          </div>
        </div>
      </div>
    )
  }
}

export default SearchBar;