如何在另一个组件中使用反应 class 属性

Question

I have a property in a react component ( Createjob.js ):

class Createjob extends Component {
.....
  handleClick = clickType => {
    const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
}
export default createjob

and I have a button in another react component and I want it to use this property someting like:

export class MainInfo extends Component {
<button type='submit' onClick={() => this.Createjob.handleClick('next')} className='next'>ادامه</button>
....
}

how to achieve this?

Answer 1

pass the handleClick fucntion as a prop to the another component: as:

 <Component handleClick={this.handleClick} />

then in your button code: this.props.handleClick('next')} className='next'>ادامه

Answer 2

If your button is inside a child component of your Createjob component, you can achieve this by passing the handleClick function as a prop to the child component.

 const Createjob = () => {.... const handleClick = clickType => { const {currentStep} = this.state let newStep = currentStep clickType === 'next'? newStep++: newStep-- if (newStep > 0 && newStep <= 6) { this.setState({ currentStep: newStep }); } }... return <ChildComponent onClick={handleClick} /> } const ChildComponent = ({onClick}) => <button type='submit' onClick={() => onClick('next')} className='next'>ادامه</button>