添加和删​​除组件 React

Question

我正在构建带有“打开表单”按钮的产品卡。想要做的是当我点击 Open Form 时，要显示一个表单，当我点击 cross 时，它应该被隐藏。我通过使用组件来做到这一点。

问题 - 我单击打开表单，显示表单，然后单击交叉，然后隐藏，但是当我再次单击按钮时，它没有显示。我已经使用状态变量来渲染组件，当我调试时，更新的状态保持不变。

代码 -（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;

代码 -（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，有点困惑。

Answer 1

你的代码看起来很奇怪，不喜欢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>
        );
    }
}