时间戳

首页 > 解决方案 > 如何在 React 中删除这个 div

html - 如何在 React 中删除这个 div

问题描述

单击按钮时，我想要一个区域来写一封电子邮件。当单击删除图标时，该区域将被删除。我能怎么做

addListItem = () => {
        var number=0;
        var list = [...this.state.list];
        number++;
        var ele=
        <div id={number}>
            <span>{number}
                <TextField id="standard-basic" style={{width:"60%"}}></TextField>
            </span>
            <IconButton>
                <Delete></Delete>
            </IconButton>
        </div>
        list.push(ele)
        this.setState({list})
    }

<Button onClick={this.addListItem} style={{ float : "left" ,marginTop:10,backgroundColor: "#657c9e", borderRadius: 4, boxShadow: "#727272", width: 159, height: 46 , color: Color.AIRPLATFORM.WHITE , fontSize: 15 , fontWeight: 500,marginLeft:0}} variant="contained">ADD</Button><br></br><br></br><br></br>

<div id="list" style={{backgroundColor:"#ffffff",borderRadius:16,padding:10,minHeight:140,width:406,borderRadius:8,marginTop:10,boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.14)"}}>
                                            {this.state.list}
                                        </div>

这是我的代码

标签： htmlcssreactjs

解决方案

您可以进行条件渲染。那么，什么是条件渲染，你根据条件渲染 JSX 元素。

条件渲染

{condition ? <p>True</p> : <p>False</p>}

如果条件为真，这将呈现真段落，如果条件为假，则呈现假段落

{condition && <p>True</p>}

仅当条件为 True 时才会渲染 True，否则不渲染

在你的情况下

在您的情况下，首先您需要一个状态变量来存储渲染选择

const [renderDelete, setRenderDelete] = useState(true)

然后，在单击时将 renderDelete 设置为 false：

<button onClick={() => setRenderDelete(false)> Render Delete </button>

最后，您根据renderDelete变量进行条件渲染： 而不是<Delete />渲染：

   {renderDelete && <Delete />}

您可以执行相同的逻辑在呈现编辑字段或删除字段之间切换：

 {renderDelete ? <Delete /> : <Edit />}

推荐阅读