Reactjs 无法在onclick事件处理程序-React中传递参数

我观察到一个问题，当我点击delete按钮时，它错误地说handleDelete未定义。然而，我已经定义了它。有人能建议我如何解决这个问题吗

我试着把删除按钮放在地图功能之外，结果它成功了。然而，当我在map函数中使用delete按钮时，它不会

    import React from "react";
    import "./App.css";
    import { v1 as uuid } from "uuid";

    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [],
          item: "",
          id: uuid(),
        };
      }
      handleChange = (e) => {
        this.setState({
          item: e.target.value,
        });
      };
      handleSubmit = (e) => {
        e.preventDefault();
        const newItem = {
          item: this.state.item,
          id: this.state.id,
        };

        const newList = [...this.state.list, newItem];
        this.setState({
          list: newList,
          item: "",
          id: uuid(),
        });
      };
      handleDelete = (id) => {
        console.log("delete button pressed");
      };
      clearList = () => {
        this.setState({
          list: [],
        });
      };
      render() {
        return (
          <>
            <form onSubmit={this.handleSubmit}>
              <input
                placeholder="enter list name"
                value={this.state.item}
                onChange={this.handleChange}
              />
              <button type="submit">add item</button>
            </form>
            <ul>
              {this.state.list.map(function (element, id) {
                return (
                  <li key={id}>
                    <h5>{element.item}</h5>
                    <button type="button">edit</button>
                    <button onClick={() => this.handleDelete(id)}>delete</button>
                  </li>
                );
              })}
            </ul>
            <button type="button" onClick={this.clearList}>
              clear list
            </button>

          </>
        );
      }
    }

从“React”导入React；
导入“/App.css”；
从“uuid”导入{v1 as uuid}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
项目：“，
id:uuid（），
};
}
handleChange=（e）=>{
这是我的国家({
项目：e.目标价值，
});
};
handleSubmit=（e）=>{
e、 预防默认值（）；
常量newItem={
项目：this.state.item，
id:this.state.id，
};
const newList=[…this.state.list，newItem]；
这是我的国家({
列表：新列表，
项目：“，
id:uuid（），
});
};
handleDelete=（id）=>{
console.log（“按下删除按钮”）；
};
clearList=（）=>{
这是我的国家({
名单：[]，
});
};
render（）{
返回(
添加项

{this.state.list.map（函数（元素，id）{
返回(

{element.item}
编辑
this.handleDelete（id）}>delete

);
})}

清除列表
);
}
}

在映射中使用箭头函数，您缺少词汇绑定

import React from "react";
import "./App.css";
import { v1 as uuid } from "uuid";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      item: "",
      id: uuid(),
    };
  }
  handleChange = (e) => {
    this.setState({
      item: e.target.value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      item: this.state.item,
      id: this.state.id,
    };

    const newList = [...this.state.list, newItem];
    this.setState({
      list: newList,
      item: "",
      id: uuid(),
    });
  };
  handleDelete = (id) => {
    console.log("delete button pressed");
  };
  clearList = () => {
    this.setState({
      list: [],
    });
  };
  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <input
            placeholder="enter list name"
            value={this.state.item}
            onChange={this.handleChange}
          />
          <button type="submit">add item</button>
        </form>
        <ul>
          {this.state.list.map((element, id) => {
            return (
              <li key={id}>
                <h5>{element.item}</h5>
                <button type="button">edit</button>
                <button onClick={() => this.handleDelete(id)}>delete</button>
              </li>
            );
          })}
        </ul>
        <button type="button" onClick={this.clearList}>
          clear list
        </button>

      </>
    );
  }
}

从“React”导入React；
导入“/App.css”；
从“uuid”导入{v1 as uuid}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
项目：“，
id:uuid（），
};
}
handleChange=（e）=>{
这是我的国家({
项目：e.目标价值，
});
};
handleSubmit=（e）=>{
e、 预防默认值（）；
常量newItem={
项目：this.state.item，
id:this.state.id，
};
const newList=[…this.state.list，newItem]；
这是我的国家({
列表：新列表，
项目：“，
id:uuid（），
});
};
handleDelete=（id）=>{
console.log（“按下删除按钮”）；
};
clearList=（）=>{
这是我的国家({
名单：[]，
});
};
render（）{
返回(
添加项

{this.state.list.map（（元素，id）=>{
返回(

{element.item}
编辑
this.handleDelete（id）}>delete

);
})}

清除列表
);
}
}

在映射中使用箭头函数，您缺少词汇绑定

import React from "react";
import "./App.css";
import { v1 as uuid } from "uuid";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      item: "",
      id: uuid(),
    };
  }
  handleChange = (e) => {
    this.setState({
      item: e.target.value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      item: this.state.item,
      id: this.state.id,
    };

    const newList = [...this.state.list, newItem];
    this.setState({
      list: newList,
      item: "",
      id: uuid(),
    });
  };
  handleDelete = (id) => {
    console.log("delete button pressed");
  };
  clearList = () => {
    this.setState({
      list: [],
    });
  };
  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <input
            placeholder="enter list name"
            value={this.state.item}
            onChange={this.handleChange}
          />
          <button type="submit">add item</button>
        </form>
        <ul>
          {this.state.list.map((element, id) => {
            return (
              <li key={id}>
                <h5>{element.item}</h5>
                <button type="button">edit</button>
                <button onClick={() => this.handleDelete(id)}>delete</button>
              </li>
            );
          })}
        </ul>
        <button type="button" onClick={this.clearList}>
          clear list
        </button>

      </>
    );
  }
}

从“React”导入React；
导入“/App.css”；
从“uuid”导入{v1 as uuid}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
项目：“，
id:uuid（），
};
}
handleChange=（e）=>{
这是我的国家({
项目：e.目标价值，
});
};
handleSubmit=（e）=>{
e、 预防默认值（）；
常量newItem={
项目：this.state.item，
id:this.state.id，
};
const newList=[…this.state.list，newItem]；
这是我的国家({
列表：新列表，
项目：“，
id:uuid（），
});
};
handleDelete=（id）=>{
console.log（“按下删除按钮”）；
};
clearList=（）=>{
这是我的国家({
名单：[]，
});
};
render（）{
返回(
添加项

{this.state.list.map（（元素，id）=>{
返回(

{element.item}
编辑
this.handleDelete（id）}>delete

);
})}

清除列表
);
}
}