Question

在为事件处理程序handleRemoveItem（event）调用索引时，span标记的索引在尝试parseInt（event.target.id）时返回NaN

我正在尝试创建一个简单的ReactJS程序，该程序将用用户输入的数据填充div，然后可以通过单击div来删除

以下代码是导出到index.js文件的组件

import React from "react";
import "./styles.css";

export default class DivList extends React.Component {
  constructor(props) {
    super();
    this.state = { text: "", filter: "", data: [] };
  }

  handleInputChange(event) {
    let text = event.target.value;
    this.setState({ text });
  }

  clearTheArray = () => {
    this.setState({ data: [] });
  };

  handleButtonClick(event) {
    if (this.state.text.length > 0) {
      let data = this.state.data.slice();
      data.push(this.state.text);
      let text = "";
      // TODO: Update state with data and text
      this.setState({ text });
      this.setState({ data });
    }
  }

  handleRemoveItem(event) {
    let newIndex = parseInt(event.target.id, 10);
    console.log(event.target.id + " is the actual index");
    let dataCopy = this.state.data.slice();
    console.log(newIndex + " is the index");
    dataCopy.splice(newIndex, 1);
    this.setState({ data: dataCopy });
  }


  render() {
    let data = this.state.data.slice();
    let list = data.sort().map((elem, index) => (
      <span onClick={this.handleRemoveItem.bind(this)} id={index}>
        {" "}
        <div key={index}> {elem} </div>{" "}
      </span>
    ));
    return (
      <div className="App">
        <h1>Dynamic Div</h1>
        <h2>Sort and filter</h2>
        Enter text:&nbsp;
        <input
          type="text"
          value={this.state.text}
          onChange={e => this.handleInputChange(e)}
        />
        &nbsp;
        {/*console.log(data) */}
        <button onClick={this.handleButtonClick.bind(this)}>Add</button>
        &nbsp;
        <button type="button" onClick={this.clearTheArray}>
          {" "}
          Reset{" "}
        </button>
        <br />
        {list}
      </div>
    );
  }
}

我希望能够单击页面上的某个元素，然后将其删除。但是，当我单击任何一个元素时，第一个元素将被删除，而不是我单击的元素。我认为这是我的索引编制问题，但我不知道是什么原因造成的

如何修复在事件处理程序中返回NaN的事件中的调用索引？

0 个答案: