主页 / 问题 / 1402383
Accepted
Stark
Asked:2022-06-21 15:50:21 +0000 UTC2022-06-21 15:50:21 +0000 UTC

如何在单击按钮时删除特定元素？

  • 772

有这样的标志在此处输入图像描述

还有她的代码

<table id={'tableH'} className="history__body">
    {
      this.props.room?.discussions.map((d) => d.end != null && (
        // eslint-disable-next-line react/jsx-key
        <div className={'history__story__body'}>
          <Story discussionId={d.id} onClick={this.handleClickOpen} key={d.id} title={d.title} average={d.averageVote} />
          <Button onClick={undefined} className={'history__story-btnDelete'} title={<img src={remove} />} />
        </div>
      ))
    }
  </table>

const Story: React.FC<IProps> = (props) => {
  return <div onClick={() => props.onClick(props.discussionId)}>
    <tr className="history__story">
      <td>{props.title}</td>
      <td className="history__story-value">{props.average}</td>
    </tr>
  </div>
    ;
}

这样的故事，连同它右边的按钮，被添加到这个表中。那么如何在单击按钮时删除整个特定行？

javascript reactjs

2 个回答

  1. 这是一个如何从表中删除行的简单示例，希望对您有用：

    const {useState} = React;

function Row({company, remove}) {
  return (
    <tr>
      <td>{company.name}</td>
      <td>{company.contact}</td>
      <td><button onClick={remove}>Delete</button></td>
    </tr>
  )
}

function Table({companies, setCompanies}) {
  
  const removeCompany = (index) => {
    setCompanies(companies.filter((company, i) => i !== index));
  }
  
  return (
     <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Action</th>
      </tr>
      {companies.map((item, index) => <Row company={companies[index]} remove={() => removeCompany(index)}/>)}
    </table> 
  )
}

function App() {
  const [companies, setCompanies] = useState([
    {
      name: 'Company 1',
      contact: 'Company 1 contact'
    },
    {
      name: 'Company 2',
      contact: 'Company 2 contact'
    },
    {
      name: 'Company 3',
      contact: 'Company 3 contact'
    },
    {
      name: 'Company 4',
      contact: 'Company 4 contact'
    },
    {
      name: 'Company 5',
      contact: 'Company 5 contact'
    },
  ]);
  
  return (
    <Table companies={companies} setCompanies={setCompanies}/>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
    table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

    • 1
  2. Best Answer
    1. 放置key和history__story__body删除// eslint-disable-next-line react/jsx-key。会有类似的东西key="d.id"
    2. 您需要编写函数 INSTEAD OF onClick={undefined}。这些功能将取决于您在哪里获取 props 中的数据props.room.discussions。那些。生成数据的地方。很可能，您需要向服务器发出请求。然后就删除
    3. 在服务器响应之后，或者如果您只在本地需要它（无需向服务器请求），请更改状态而不改变数据。像这样的东西https://jsfiddle.net/e3try762/
    • 1

相关问题