javascript - 当单击一个元素时，其他元素在 React JS 中禁用

Question

这是我的问题

我有一个带有名称的简单数组，当我单击一个元素时，该元素将处于事件状态，而另一个元素将处于事件状态

问题

当我点击一个元素时，所有元素都会变为事件状态

我想要什么

当我点击“名称1”时，背景变成红色，其他背景变成白色，当我点击“名称2”时，背景变成红色，其他背景变成白色，依此类推

这是我一直在尝试做的事情

https://codesandbox.io/s/nifty-saha-8ho1u?file=/src/App.js

Answer 1

要始终只选择一个，请使用键:

  const handleSelect = key => {
    setSelect(key);
  };

并在选择中:

        <Select
          key={key}
          // Passa status de ativo e inativo com true e false
          status={select === key}
          // Altera o status de select ao clicar
          click={() => handleSelect(key)}
          // Nome do usuário
          user={name}
        />

import React, { useState } from "react";
import "./styles.css";

//
// COMPONENT FILHO
//

function Select({ user, click, status }) {
  return (
    <li className={status ? "active" : null} onClick={click}>
      {user}{" "}
    </li>
  );
}

const names = ["Name 1", "Name 2", "Name 3", "Name 4", "Name 5"];

//
// COMPONENT PAI
//

export default function App() {
  const [select, setSelect] = useState(false);

  const handleSelect = key => {
    setSelect(key);
  };

  return (
    <div className="App">
      {names.map((name, key) => (
        <Select
          key={key}
          // Passa status de ativo e inativo com true e false
          status={select === key}
          // Altera o status de select ao clicar
          click={() => handleSelect(key)}
          // Nome do usuário
          user={name}
        />
      ))}
    </div>
  );
}

代码沙箱:https://codesandbox.io/s/hopeful-hopper-ozlqi

预览:

<小时/>

问题

您有一个通用的Select变量来决定一切的状态。每个选择都需要一个。

移动以下内容:

  const [select, setSelect] = useState(false);

  const handleSelect = () => {
    setSelect(!select);
  };

在组件内部。

import React, { useState } from "react";
import "./styles.css";

//
// COMPONENT FILHO
//

function Select({ user, click }) {

  const [select, setSelect] = useState(false);

  const handleSelect = () => {
    setSelect(!select);
  };

  return (
    <li className={select ? "active" : null} onClick={handleSelect}>
      {user}
    </li>
  );
}

const names = ["Name 1", "Name 2", "Name 3", "Name 4", "Name 5"];

//
// COMPONENT PAI
//

export default function App() {

  return (
    <div className="App">
      {names.map(name => (
        <Select
          user={name}
        />
      ))}
    </div>
  );
}

在这里查看:https://codesandbox.io/s/flamboyant-lumiere-1jdoh

这只是为您确定问题，并且会有单独的状态。

预览: