如何在 reactjs 中"Remove the Textareas by clicking a button"

Question

• 由于我是新手，所以我想执行删除操作
• 我有四个文本区域和右侧的删除按钮
• 如果我点击删除按钮，特定的文本区域应该被删除
• 代码：

import React,{Component} from "react";
import ReactDOM from "react-dom";
class App extends Component {

handleRemove(){
}
render()
{

return(
<div>
<div>
<input
className="textstyle"  
/> 
<button onClick={()=>this.handleRemove()}>Delete</button> 
</div>
<div>
<input
className="textstyle"  
/> 
<button onClick={()=>this.handleRemove()}>Delete</button> 
</div>
<div>
<input
className="textstyle"  
/> 
<button onClick={()=>this.handleRemove()}>Delete</button> 
</div>
<div>
<input
className="textstyle"  
/> 
<button onClick={()=>this.handleRemove()}>Delete</button> 
</div>
</div>
)
}
}
export default App;

Answer 1

尝试以下方法，

import React, { Component } from "react";
class App extends Component {
state = {
removedId: []
};
handleRemove(id) {
this.setState((prev) => ({ ...prev, removedId: [...prev.removedId, id] 
}));
}
render() {
return (
<div>
<div>
{!this.state.removedId.includes(1) && (
<>
<input className="textstyle" />
<button onClick={() => this.handleRemove(1)}>Delete</button>
</>
)}
</div>
<div>
{!this.state.removedId.includes(2) && (
<>
<input className="textstyle" />
<button onClick={() => this.handleRemove(2)}>Delete</button>
</>
)}
</div>
<div>
{!this.state.removedId.includes(3) && (
<>
<input className="textstyle" />
<button onClick={() => this.handleRemove(3)}>Delete</button>
</>
)}
</div>
<div>
{!this.state.removedId.includes(4) && (
<>
<input className="textstyle" />
<button onClick={() => this.handleRemove(4)}>Delete</button>
</>
)}
</div>
</div>
);
}
}
export default App;

工作演示-https://codesandbox.io/s/patient-silence-nr9ou?file=/src/App.js:0-1020

Answer 2

我建议使用一种优化的方式来处理以下内容-

改进了您的代码

export default class App extends React.Component {
state = {
lists: [
{ id: 1, show: true },
{ id: 2, show: true },
{ id: 3, show: true },
{ id: 4, show: true }
]
};
handleDelete = (item) => {
let updated = this.state.lists.filter((list) => list.id !== item.id);
this.setState({ lists: updated });
};
render() {
return (
<div className="App">
{this.state.lists.map((list, indx) => (
<React.Fragment key={indx}>
<div>
<input type="textarea" placeholder="Enter something" />
<button onClick={() => this.handleDelete(list)}>Delete</button>
</div>
</React.Fragment>
))}
</div>
);
}
}

实时工作演示

Answer 3

我建议保留它的功能组件，并利用ReactHooks(useState(，而不是使用基于类的组件。

给你：

import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [rows, setRows] = useState([
{
id: "uniqueid_1",
name: "textarea-1",
value: ""
},
{
id: "uniqueid_2",
name: "textarea-2",
value: "seomthing"
}
]);
const handleRemove = (index) => {
let array = [...rows]; // make a separate copy of the array
if (index !== -1) {
array.splice(index, 1);
setRows(array);
}
};
return (
<div className="App">
<div>
{rows.map((row, index) => {
return (
<div key={row.id}>
<input name={row.name} className="textstyle" />
<button onClick={() => handleRemove(index)}>Delete</button>
</div>
);
})}
</div>
</div>
);
}