在 React 中将按钮单击从子项传递到父项

Question

在尝试在两个子组件之间切换时，我需要在子组件中有触发器按钮，并将单击功能通过子组件传递给 以切换另一个子组件。我不确定如何将道具从孩子推送到父母以触发切换。

父组件

import React from 'react'
import CancelOffer from '../CancelPages/CancelOffer'
import CancelWarning from '../CancelPages/CancelWarning'

class Cancel extends React.Component {
  constructor() {
    super()
    this.state = {
      isHidden: true
    }
  }
  toggleOffer() {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
  render() {
    return ( 
    <div className = 'cancel'
      style = {{backgroundImage: `url(${this.props.backgroundImage})`}} >
      <div className = 'container' > 
        {!this.state.isHidden &&
          <CancelOffer { ...this.props}/>
        }

        {this.state.isHidden &&
            <CancelWarning { ...this.props}/>
        }

        {this.state.isHidden &&
            <button onClick = {this.toggleOffer.bind(this)} > Click < /button>
        } 
      </div> 
      </div>
    )
  }
}

export default Cancel

子组件

import React from 'react'
import SvgIcon from '../SvgIcon/SvgIcon'
import './CancelWarning.scss'

function CancelOffer (props) {
  const content = props.config.contentStrings

  return (
    <div className='cancel-warning'>
      <h2 className='heading md'>heading</h2>
      <p className='subpara'>subheading</p>
      <div className='losses'>
        <ul>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ul>
        </div>
      <div className='footer-links'>
        <a href='/member' className='btn btn--primary btn--lg'>continue</a>
        <a href='/cancel' className='cancel-link'>Cancel</a>
        //NEED TO HAVE BUTTON HERE AND PASS PROPS TO PARENT TO TOGGLE VIEW
        {this.state.isHidden &&
        <button onClick = {this.toggleOffer.bind(this)}>Click</button>
        } 
      </div>
    </div>
  )
}

export default CancelOffer

Answer 1

你可以像普通参数一样传递它。此外，您可以使用箭头函数代替绑定。

父组件

import React from 'react'
import CancelOffer from '../CancelPages/CancelOffer'
import CancelWarning from '../CancelPages/CancelWarning'

class Cancel extends React.Component {
  constructor() {
    super()
    this.state = {
      isHidden: true
    }

    this.toggleOffer = this.toggleOffer.bind(this);
  }

  toggleOffer() {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }

  render() {
    const { isHidden } = this.state
    return ( 
    <div className = 'cancel'
      style = {{backgroundImage: `url(${this.props.backgroundImage})`}} >
      <div className = 'container' > 
        {!isHidden &&
          <CancelOffer toggleOffer={this.toggleOffer} isHidden={isHidden}/>
        }

        {isHidden &&
            <CancelWarning toggleOffer={this.toggleOffer} isHidden={isHidden}/>
        }

        {isHidden &&
            <button onClick = {this.toggleOffer}> Click </button>
        } 
      </div> 
      </div>
    )
  }
}

export default Cancel

子组件

import React from 'react'
import SvgIcon from '../SvgIcon/SvgIcon'
import './CancelWarning.scss'

function CancelOffer (props) {
  const content = props.config.contentStrings

  return (
    <div className='cancel-warning'>
      <h2 className='heading md'>heading</h2>
      <p className='subpara'>subheading</p>
      <div className='losses'>
        <ul>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ul>
        </div>
      <div className='footer-links'>
        <a href='/member' className='btn btn--primary btn--lg'>continue</a>
        <a href='/cancel' className='cancel-link'>Cancel</a>
        {props.isHidden &&
        <button onClick = {props.toggleOffer}>Click</button>
        } 
      </div>
    </div>
  )
}

export default CancelOffer