Question

我在子组件上有一个搜索栏，当我在里面写字时，该子组件会显示一个面板，当我在此面板的外部单击时，我正在尝试将其关闭。因此，我需要一个解决方案来在此时将状态设置为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用ref.on("child_changed", function(snapshot) { var changedPost = snapshot.val(); console.log("The updated post title is " + changedPost.title); });属性覆盖面板后面的屏幕，以更改状态。

Answer 2

我终于使用Redux做到了，我创建了一个ShowPannel减速器，里面只有一个布尔可见状态。这是我的代码：

[我的看法]：

EXECUTE Environment.dbo.psu_some_psu

@instanceId = 1
,@serverId = 2
,@ip = '111.111.111.111'
,@clientName = 'dev-contact'
,@applicationId = 9
,@accountId = 35
,@userID = 22

DECLARE @restoreId INT
SET @restoreId = SCOPE_IDENTITY()

UPDATE Environment.dbo.restore_requests
SET Status = 1
WHERE Id = @restoreId

[我的减速器]：

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;

React-单击父级时如何在子级上设置状态

2 个答案: