在一个antd表单中处理多个Button

Question

我有一个 antd 表单，里面有两个提交按钮。我想在单击句柄按钮时删除特定的选定项目。控件不会进入我的 onClick 句柄按钮功能。现在我正在尝试在 console.log 中打印。当我单击删除图标时，在 coonsole.log 中没有打印任何内容。请有人帮我解决这个问题。

沙盒链接：https://we4fw.csb.app/

逻辑：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Select, Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import CollegeList from "./CollegeList";

const { Option } = Select;

const Demo = () => {
  const collegesList = CollegeList;
  const [collegesSelectedList, setCollegesSelectedList] = React.useState([]);
  let count = 1;

  const handleRemoveList = (college) => {
    console.log("onClick", college);
  };
  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  return (
    <Form name="validate_other" onFinish={onFinish}>
      <Form.Item name="select" label="Select">
        <Select
          placeholder="Please select a country"
          onChange={(college) => {
            setCollegesSelectedList([
              ...collegesSelectedList,
              collegesList[college].name
            ]);
          }}
        >
          {Object.keys(collegesList).map((college) => (
            <Option value={college}>{collegesList[college].name}</Option>
          ))}
        </Select>
      </Form.Item>
      <label>List of institutes selected</label>
      <div style={{ border: "1px solid #b3e2d2" }}>
        <Form.Item>
          {collegesSelectedList.map((college) => (
            <ul key={college}>
            <li >
              {count++}.{college}{" "}
              <Button
                size="small"
                onClick={(college) => handleRemoveList(college)}
                icon={<DeleteOutlined />}
                danger
              />
            </li>
            </ul>
          ))}
        </Form.Item>
      </div>

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById("container"));

Answer 1

您不小心指的是HTMLEvent，而不是college 本身

因此，您需要像这样删除该事件引用：

<Button
       size="small"
       onClick={(college) => handleRemoveList(college)}
       icon={<DeleteOutlined />}
       danger
/>

收件人：

<Button
       size="small"
       onClick={() => handleRemoveList(college)}
       icon={<DeleteOutlined />}
       danger
/>

要从列表中删除您的项目，您需要更新您的handleRemoveList：

const handleRemoveList = (college) => {
    setCollegesSelectedList(collegesSelectedList.filter((c) => c !== college));
};