React - 如何在单击 parent 时在 children 上设置状态

Question

我在 children 组件上有一个搜索栏，当我在里面写的时候它会显示一个面板，当我在此面板外单击时，我试图在我的 parent 上关闭它。所以我现在需要一个解决方案来设置一个状态为false。

有什么想法吗？

这是我的代码示例：

[parent.js]

constructor(props) {
  super(props)
  this.state = {
    showResults: false
  }
}

render() {
  return (
    <div onClick={() => this.setState({showResults: false})}>
      <div>
        <Children showResults={this.state.showResults}/>
    </div>
  </div>)
}

[children.js]

constructor(props) {
  super(props)
  this.state = {
    showResults: this.props.showResults
  }
}

getResults(event) {
  this.setState({input: event.target.value, showResults: true})
}

render() {
  return (<div>
    <Input onChange={this.getResults.bind(this)}/>
    this.state.showResults ?
      <div>PANNEL</div>
      : ''
  </div>)
}

Answer 1

当面板打开时，创建一个透明 div 用 onClick 属性覆盖面板后面的屏幕以更改状态。

Answer 2

我终于使用 Redux 做到了，我创建了一个 ShowPannel reducer，它内部只有一个布尔可见状态。这是我的代码：

[我的看法]:

render() {
  return (<div onClick={() => this.props.showPannel(false)}>
    {
      this.props.visible
        ? <div className="listResults"></div>
        : ''
    }
  </div>)
}

function mapStateToProps(state) {
  return {visible: state.showPannelReducer.visible};
}

function mapDispatchToProps(dispatch) {
  return {
    showPannel: (visible) => dispatch(showPannel(visible))
  }
}

Home = connect(mapStateToProps, mapDispatchToProps)(Home);

export default Home;

[我的减速机] :

import {SHOW_PANNEL} from '../actions/pannel/types';

const initialState = {
  visible: false
};

function showPannelReducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_PANNEL:
      return {
        ...state,
        visible: action.visible
      }
    default:
      return state
  }
};

export default showPannelReducer;

React - 如何在单击 parent 时在 children 上设置状态

React - How to set a state on a children when clicking on the parent

javascript

state

click

setstate

reactjs