从数组中删除所选元素

Question

我有输入字段，它从用户那里获取输入 (interest)，然后在按下 Enter 键后 将 interest 添加到 interests数组。然后，随着用户继续添加，此数组中的元素将通过 Domain 组件显示在屏幕上。 Domain 组件包含一个图标 X（叉），单击该图标应从数组中删除 selected/clicked 元素。现在，数组中的最后一个元素在单击后被删除。

我该如何解决这个问题？这是代码：

function Demo() {
  const [interest, setinterest] = useState("");
  const [interests, setinterests] = useState([]);

  const domainSelection = (e) => {
    if (e.key === "Enter" && interest.length > 0) {
      setinterests((interests) => [...interests, interest]);
      setinterest("");
    }
  };

  const RemoveDomain = (e) => {
    var arr = [...interests];
    var index = arr.indexOf(e.target.value);
    arr.splice(index, 1);
    setinterests(arr);
  };

  const Domain = ({ interest }) => {
    return (
      <span>
        {interest}
        <span>
          <X onClick={RemoveDomain} />
        </span>
      </span>
    );
  };

  return (
    <div>           
          <Input
            name="intersts"
            type="text"
            placeholder="eg Machine Learning .. "
            value={interest}
            required={true}
            onChange={(e) => setinterest(e.target.value)}
            className="interest-input inputs"
            onKeyDown={domainSelection}
          />
          {interests.map((interest, i) => (
            <Domain
              interest={interest}
              // Prevent duplicate keys by appending index:
              key={interest + i}
            />
          ))}
    </div>
  );
}

export default Demo;

Answer 1

我认为 e.target.value 未定义。使用过滤器，这可能有帮助

const RemoveDomain = (value) => {
  var arr = interests.filter((item) => item !== value);
  setinterests(arr);
};

const Domain = ({ interest }) => {
  return (
    <span>
      {interest}
      <span>
        <X onClick={() => RemoveDomain(interest)} />
      </span>
    </span>
  );
};

从数组中删除所选元素

Remove selected element from array

javascript

arrays

events

state

reactjs