Question

我的React应用中有一个这样的html标签

<ul>
   <li>
      Item 1
      <button>
         Delete
      </button>
   </li>
   <li>
      Item 2
      <button>
         Delete
      </button>
   </li> 
   <li>
      Item 3
      <button>
         Delete
      </button>
   </li>   
</ul>

现在，如果我从li元素之一中单击Delete按钮，我想删除该特定li。我该如何仅使用JavaScript将点击的按钮引用到该特定用户？

Answer 1

使用Array.map()生成商品并附加一个onClick处理程序，如下所示：

class Demo extends React.Component {
  state = { items: ['Item 1', 'Item 2', 'Item 3'] };
  
  handleDelete = name => {
    this.setState(s => ({ items: s.items.filter(x => x !== name) }));
  }

  render() {
    return (
      <ul>{this.state.items.map(x =>
        <li>{x}&nbsp;
          <button onClick={() => this.handleDelete(x)}>Delete</button>
        </li>
      )}</ul>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果您不想为每个项目生成一个删除功能，并且不想在一个函数中处理该删除操作，则必须在项目中添加某种类型的ID才能识别它们。然后，您可以使用数据属性将此ID附加到按钮，并从处理程序中的event.target获取此ID：

class Demo extends React.Component {
  state = {
    items: [
      { id: 1, content: 'Item 1' },
      { id: 2, content: 'Item 2' },
      { id: 3, content: 'Item 3' }
    ]
  };
  
  handleDelete = e => {
    const id = +e.target.getAttribute('data-id');
    this.setState(s => ({ items: s.items.filter(x => x.id !== id) }));
  }

  render() {
    return (
      <ul>{this.state.items.map(({ id, content }) =>
        <li key={id}>{content}&nbsp;
          <button data-id={id} onClick={this.handleDelete}>Delete</button>
        </li>
      )}</ul>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您可以基于li元素中的id为按钮元素提供id属性，并在引用要删除的项目时使用该id。

指一个按钮到特定的李？

2 个答案: