Question

我试图单击子React组件的按钮，以更改子及其父项的布尔状态。这里的问题是必须更改两个组件的状态。

以下是我尝试使用的代码的链接：

https://stackblitz.com/edit/child-to-parent-state-pass-bkmvwc?file=Child.js

要求是单击“汉堡包”按钮，它会更改子组件（实际的汉堡包按钮）及其父组件的状态。

谢谢！

Answer 1

我不建议您做什么。但是，不知道您的背景，我只会回答您的问题。

在parent.js中，您缺少与此绑定。请改用此行，并检查其是否有效

Answer 2

您将只更改父级的状态。孩子只会阅读传递给它的道具。

父组件

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

handleHamburgerToggle = () => {
  let { hamburgerOpen } = this.state;
  this.setState({
     hamburgerOpen: !hamburgerOpen
  })
}

render() {
  let { hamburgerOpen } = this.state;

  return (
     <Child
       hamburgerOpen={hamburgerOpen}
       handleHamburgerToggle={this.handleHamburgerToggle}
     />
  )
}

孩子将有权使用传递给它的道具。您也可以将Hamburger用作功能组件，因为它不关心当前状态，只有父状态可以。

hamburgerOpen和切换HamburgerOpen

子组件

const { handleHamburgerToggle } = this.props;
return {
  <div>
    <div
      onClick={() => handleHamburgerToggle()}
    >
    Click me to toggle hamburger
    </div>
  </div>
}

Answer 3

为什么不通过父组件like管理状态：

Parent.js：

import React from 'react'
import { Link } from 'react-router-dom'
import { initializeIcons } from '@uifabric/icons';
import Hamburger from './Child'
initializeIcons();

export default class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: false
     };
  }
  handleCounter = () => {
    this.setState({ opened: !this.state.opened });
  }
  render() {
    return (
        <Hamburger 
          opened={this.state.opened} 
          handleCounter={this.handleCounter}
        />
    );
  }
}

Child.js

import React from 'react'
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();


export default class Hamburger extends React.Component {
  constructor(props) {
    super(props);
  }
  updateParent() {
    this.props.handleCounter(this.state);
  }
  render() {

    return (
      <IconButton
        checked={this.props.opened}
        iconProps={{ iconName: (this.props.opened ? 'Cancel' : 'GlobalNavButton'), style: { fontSize: 35 } }} 
        className="hamburger mobile-only"
        title="Open Global Navigation" 
        ariaLabel="Open Global Navigation"
        styles={{
          root: {
            padding: '0',
            border: 'none',
            background: 'transparent !important'
          }
        }}
        onClick={this.props.handleCounter}
      />
    );
  }
}

PS：我删除了注释以提高可读性

单击时反应子组件和父组件的状态更改

3 个答案: