React - 单击父项时如何在子项上设置状态答案

【问题标题】：React - How to set a state on a children when clicking on the parentReact - 单击父项时如何在子项上设置状态
【发布时间】：2019-03-09 23:51:21
【问题描述】：

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

有什么想法吗？

这是我的代码示例：

[父.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>)
}

【问题讨论】：

您需要分享的代码甚至都不多。所以请在问题中分享相关代码
@sagi，毫无疑问，这个问题缺乏信息，但你可以用更友好的方式表达这个评论......
抱歉，我刚刚更新了我的问题。如果您需要更多信息，请告诉我
@Think-Twice 抱歉:)

标签： javascript reactjs click state setstate

【解决方案1】：

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

【讨论】：

【解决方案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;

【讨论】：