MaximAr1es
@MaximAr1es
Frontend junior developer

Как из одного компонента вызвать метод другого компонента в React?

Есть компонент списка:
class Service extends React.Component {

  render() {
    return (
      <li className="services__item" onClick={Modal.openModal}>
        {this.props.name}
      </li>
    );
  }
}


Хочу по клику на него, обратиться к другому компоненту, вызвать его метод и тем самым сделать его видимым(модальное окно).
class Modal extends React.Component{
    constructor(props){
        this.state = {
            showModal: false
        }
    }

    openModal = () =>{
        this.setState = {showModal: true}
    }

    render(){
        return(
            <div>
                
                    <div className="service-modal-wrapper" openModal={this.openModal}>
          <div className="service">
              <div className="service-header">
                  <h3 className="service-header__title">{this.props.name}</h3>
              </div>
              <div className="service-content">
                  <ul className="service-content__descript">
                      <li className="service-content__item">1</li>
                      <li className="service-content__item">2</li>
                      <li className="service-content__item">3</li>
                      <li className="service-content__item">4</li>
                  </ul>
              </div>
          </div>
      </div>
            </div>
           
        );
    }
}


Как мне этого добиться?
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 2
Zhanna_K
@Zhanna_K
in progress
const Service =  (props) => {
const [showModal, setShowModal] = useState(false)
    return (
<div>
      <li className="services__item" onClick={() =>setShowModal(true)}>
        {props.name}
      </li>
    {showModal && <Modal />}
</div>
    );
}
Ответ написан
8XL
@8XL
Я высокий, но ниже, чем вы подумали.
Я могу ошибаться, но разве это не решается:
1. Либо передачей метода в пропсы дочернего компонента(в таком случае состояние модального окна хранится в родительском компоненте). Модальное окно подписано на состояние showModal, а компонент Service в пропсы получает сам метод изменения состояния модального окна.
2. Так как компоненты классовые, можно обратиться к нативному js и воспользоваться методом super()...но не уверен, что это будет хорошим решением.
3. Либо, как предложила Zhanna_K, переписав стили компонента на абсолютное позиционирование.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы