Блог

Я создаю карточку продукта с помощью кнопки «Открыть форму». Что нужно сделать, так это когда я нажимаю на открытую форму, отображается форма, а когда я нажимаю на крест, она должна быть скрыта. Я делаю это с помощью компонентов.

Проблема — я нажимаю на открытую форму, отображается форма, затем я нажимаю на крест, затем он скрывается, но когда я снова нажимаю на кнопку, она не отображается. Я использовал переменные состояния для визуализации компонента, при отладке поддерживается обновленное состояние.

Код — (класс ProdCard)

 import React from 'react';
import ReactDOM from 'react-dom';
import FormLayout from '../Form/FormLayout';
import {Atag,Button, Container} from '../Elements/Elements';

class ProdCard extends React.Component {
    constructor(props){
        super(props);
        this.openForm = this.openForm.bind(this);
    }
    openForm(){
        ReactDOM.render(<FormLayout ctaClicked={true}/>, document.getElementById('forms'));
    }
    render() {
      return(
            <Container className="prodBox pdiBox pdiDf pdiFdc">
                <Container className="pdiPrd pdiDf">
                    <Atag href="" className="pdiImg pdiDf" children={<img alt={this.props.ProdName}/>}/>
                    <Container>
                        <h2><Atag href="" className="pdiDf pdiClr1" children={this.props.ProdName}/></h2>
                        <h3><Atag href="" className="pdiDf" children={this.props.ProdName}/></h3>
                        <Button className="gbp" id={this.props.id} onClick={this.openForm} children="Get Best Price"/>
                    </Container>
                </Container>
                <Container className="pdiDtls pdiFdc">
                    <p className="pdiTal">{this.props.Desc}</p>
                    <Atag href="#" children="View Details"/>
                 </Container>
            </Container>
      )
    }
}

export default ProdCard;
 

Code — (Класс FormLayout)

 import React from 'react';
import ReactDOM from 'react-dom';
import { Container } from '../Elements/Elements';
import FormLeft from '../Form/FormLeft';
import FormRight from '../Form/FormRight';

class FormLayout extends React.Component{
    constructor(props){
        super(props);
        this.state = {showForm : true, isCloseClicked : false}
        this.removeForm = this.removeForm.bind(this);
        this.showForm = this.showForm.bind(this);
    }
    removeForm(){
        this.setState({showForm : false, isCloseClicked : true})
    }
    render(){
        if(this.state.showForm === false) return <Container/>
        else
        return(
            <Container>
                <Container className="blck"></Container>
                <Container className="forms bcp bc">
                    <Container id="left" className="ls bcl"/>
                    <Container  className="rs">
                        <Container children="X" className="close" onClick={this.removeForm}/>
                        <Container id="right"/>
                    </Container>
                </Container>
            </Container>
             
        );
    }
    componentDidMount(){
        ReactDOM.render(<FormLeft/>, document.getElementById('left'));
        ReactDOM.render(<FormRight/>, document.getElementById('right'));
    }
}

export default FormLayout;
 

Когда именно я могу обновить состояние, чтобы достичь «пользователь нажимает на форму, она отображается, пользователь нажимает на крест, который он скрывает (и это может произойти миллион раз)»?

Новый для React, немного запутанный.

Ваш код выглядит странно и ему не нравится способ React, пожалуйста, не используйте React.render напрямую, вы должны позволить ProdCard контролировать, отображать ли FormLayout

вы должны изменить свой код на это:

 class ProdCard extends React.Component {
    constructor(props){
        super(props);
        this.openForm = this.openForm.bind(this);
        this.state = { showForm: true }
    }
    openForm(){
        this.setState({ showForm: true })
    }
    closeForm() {
        this.setState({ showForm: false })
    }
    render() {
      return(
        <>
          <Container className="prodBox pdiBox pdiDf pdiFdc">
              <Container className="pdiPrd pdiDf">
                  <Atag href="" className="pdiImg pdiDf" children={<img alt={this.props.ProdName}/>}/>
                  <Container>
                      <h2><Atag href="" className="pdiDf pdiClr1" children={this.props.ProdName}/></h2>
                      <h3><Atag href="" className="pdiDf" children={this.props.ProdName}/></h3>
                      <Button className="gbp" id={this.props.id} onClick={this.openForm} children="Get Best Price"/>
                  </Container>
              </Container>
              <Container className="pdiDtls pdiFdc">
                  <p className="pdiTal">{this.props.Desc}</p>
                  <Atag href="#" children="View Details"/>
               </Container>
          </Container>
          <FormLayout visible={this.state.showForm} onClose={this.closeForm} />
        </>
      )
    }
}

class FormLayout extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        if(!this.props.visible) {
          return <Container/>
        }

        return(
            <Container>
                <Container className="blck"></Container>
                <Container className="forms bcp bc">
                    <Container id="left" className="ls bcl">
                      <FormLeft/>
                    </Container>
                    <Container  className="rs">
                        <Container children="X" className="close" onClick={this.props.closeForm}/>
                        <Container id="right">
                          <FormRight/>
                        </Container>
                    </Container>
                </Container>
            </Container>
        );
    }
}