React JS，当单击一个选项时，其他选项也被选中答案

【问题标题】：React JS, When clicked one option, other options are also being selectedReact JS，当单击一个选项时，其他选项也被选中
【发布时间】：2020-09-10 09:13:20
【问题描述】：

下面是选项组件它会生成一堆选项问题是当我单击一个选项时，其他选项也被选中。我知道为什么会这样，但我无法解决

const InterestGenerator = () => {
  const interest_emojis = [
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
  ];

  const [selected, setSelected] = useState(false);

  const handleClick = (e) => {
    selected ? setSelected(false) : setSelected(true);
  };

  return (
    <div className="interests_options">
      {interest_emojis.map((interest) => {
        return (
          <div
            className={`interest ${selected ? " interest_selected" : ""}`}
            onClick={handleClick}
          >
            {!selected && (
              <img
                className="interest_emoji"
                src={require("../assets/emoji_" + interest.name + ".png")}
                alt="comedy_emoji"
              />
            )}
            {selected && <DoneIcon />}
            <span>{interest.name}</span>
          </div>
        );
      })}
    </div>
  );
};

export default InterestGenerator;

enter image description here

【问题讨论】：

您必须跟踪选择了哪个选项（唯一标识该选项的东西），而不仅仅是选择了一个选项。

标签： reactjs

【解决方案1】：

如您所见，组件中有一个选定状态。因此，即使您单击一次，它也会为每个人设置。解决方案是让每个组件都有自己的状态，正在做你正在做的事情并呈现这些组件的列表。

这样的事情会起作用：

这是独奏部分：

const interestEmojiComponent = ({name})=>{

const [selected, setSelected] = useState(false);

  const handleClick = (e) => {
    selected ? setSelected(false) : setSelected(true);
  };
  return (
          <div
            className={`interest ${selected ? " interest_selected" : ""}`}
            onClick={handleClick}
          >
            {!selected && (
              <img
                className="interest_emoji"
                src={require("../assets/emoji_" + name + ".png")}
                alt="comedy_emoji"
              />
            )}
            {selected && <DoneIcon />}
            <span>{name}</span>
          </div>
        );
}

这是生成器组件：

const InterestGenerator = () => {
  const interest_emojis = [
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
    { name: "Comedy" },
  ];

  return(
    <div className="interests_options">
       {interest_emojis.map((interest) => <InterestEmojiComponent name={interest.name}/>)}
    </div>
     )
}

【讨论】：

【解决方案2】：

对于所有导致意外行为的选项，您只使用一种选定状态。这里的解决方案是保持每个选项的选中状态

const [interest_emojis, set_interest_emojis] = useState([
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false },
  { name: "Comedy", selected: false }
]);

const handleClick = (index) => {
  const arr = [...interest_emojis];
  arr[index].selected = !arr[index].selected;
  set_interest_emojis(arr);
};

演示

【讨论】：