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>
    );
  }
}

Live working demo

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>
  );
}

如何在reactjs中“通过单击按钮删除文本区域”

3 个答案: