Как использовать свойство класса реакции в другом компоненте

Question

У меня есть свойство в реактивном компоненте ( 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

, и у меня есть кнопка в другом реактивном компоненте, и я хочу, чтобы он использовал это свойство что-то вроде:

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

как этого добиться?

Answer 1

передать функцию handleClick в качестве опоры другому компоненту: as:

<Component handleClick={this.handleClick} />

затем в коде вашей кнопки: this.props.handleClick ('next')} className = 'next'> ادامه

Answer 2

Если ваша кнопка находится внутри дочернего компонента вашего компонента Createjob, вы можете достичь этого, передав функцию handleClick в качестве опоры дочернему компоненту.

  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>