主页 / 问题 / 1563474
Accepted
rabbit
Asked:2024-01-27 16:45:10 +0000 UTC2024-01-27 16:45:10 +0000 UTC

将按钮单击状态传递给数组对象并从反应集合中禁用按钮单击

  • 772

我有一个按钮集合，我想确保当单击某个按钮时，其他集合中的类似按钮不会被单击。

例如：

<div>
 <button>A-1</button>
 <button>A-2</button>
 <button>A-3</button>
 <button>B-1</button>
 <button>B-2</button>
 <button>B-3</button>
</div>

<div>
 <button>A-1</button>
 <button>A-2</button>
 <button>A-3</button>
 <button>B-1</button>
 <button>B-2</button>
 <button>B-3</button>
</div>

当我单击一个按钮时B-3，我希望B-3除当前按钮之外的所有按钮都是这样的disabled。

例如，我单击按钮B-3，B-3除了当前的之外，所有内容都被禁用。

这实际上很容易做到，但我想将按下的按钮状态存储在数组对象的键的挂钩中。并将按下按钮的状态传递给钩子，如下所示B-*：

const [Buttons, setButtons] = useState([{ ClickedButtons: [null, null] }]);

null #1 - `A-*` кнопки
null #2 - `B-*` кнопки

我不太明白如何将按下按钮的状态输入到这个钩子中并禁用所有类似的按钮。请帮帮我。

<ClickedButtons id={1} />
<ClickedButtons id={2} />
<ClickedButtons id={3} />

<ButtonShow clickFn={btnClick} id={1} buttons={buttons} />
<ButtonShow clickFn={btnClick} id={2} buttons={buttons} />
<ButtonShow clickFn={btnClick} id={3} buttons={buttons} />
reactjs

2 个回答

  1. 当我单击 B-3 按钮时，我希望除当前按钮之外的所有 B-3 按钮都被禁用。

    我会建议这个选项...

    const arr = [
  ['A-1', 'A-2', 'A-3', 'B-1', 'B-2', 'B-3'],
  ['A-1', 'A-2', 'A-3', 'B-1', 'B-2', 'B-3'],
]

//
function App() {
  const [slct, setSlct] = React.useState({})
  console.log(slct)
  return <section>
    {arr.map((a, i) => <Blk key={i} arr={a} line={i} set={setSlct} slct={slct} />)}
  </section>
}
//
function Blk({arr, line, set, slct}) {
  const act = e => {
    const o = e.target
    const ol = o.closest('.blk')
    const i = +ol.dataset.line
    const v = o.textContent
    set(old => {
      if (old[v] !== undefined) delete old[v]
      else old[v] = i
      return {...old}
    })
  }
  return <div className="blk" data-line={line}>
    {arr.map(v => <button className={cls(v)} onClick={act} key={v} disabled={dis(v)}>{v}</button>)}
  </div>
  //
  function cls(v) {
    if (slct[v] === line) return 'on'
    return null
  }
  //
  function dis(v) {
    if (slct[v] === undefined) return false
    if (slct[v] !== line) return true
    return false
  }
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    .blk {
  margin: 10px;
}
.on {
  background-color: green;
}
    <div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    • 1
  2. Best Answer

    您可以实现此行为，例如，通过将单击所在的“容器”的 ID 保存到按钮状态并在渲染期间进行检查：

    • 如果没有点击clickId === 0，则该按钮处于活动状态
    • 如果有点击，那么我们检查点击是否在当前容器中
    • 如果在当前按钮中，则该按钮处于活动状态，否则不处于活动状态

    例如，我们为每个按钮创建以下结构：

    {
    name: "A-1", // Название кнопки
    clickId: 0, // Где нажата
    buttonId: 1, // ID кнопки
},

    让我们创建一个负责渲染按钮及其状态的组件

    const ButtonShow = ({ buttons, id, clickFn }) => {
  return (
    <>
      {buttons.map((button) => (
        <button
          // По клику передаем Id кнопки и id контейнера
          onClick={() => clickFn(button.buttonId, id)}
          // Если заполнен клик и он не из этого контейнера, отключаем кнопку
          disabled={button.clickId && button.clickId !== id}
        >
          {button.name}
        </button>
      ))}
    </>
  );
};

    在主组件中，我们创建一个处理按钮点击的状态和函数

    function App() {
  const [buttons, setButtons] = useState([...buttonsInit]);

  const btnClick = (btnId, rndId) => {
    setButtons((prev) => {
      return prev.map((btn) => {
        // Если ID кнопки не совпало, возвращаем элемент как есть
        if (btn.buttonId !== btnId) return btn;
        // Если ID контейнера совпадает, отключаем клик
        // Если нет, устанавливаем
        btn.clickId = rndId === btn.clickId ? 0 : rndId;
        return btn;
      });
    });
  };

  return (
    <div className="App">
      <hr />
      <ButtonShow clickFn={btnClick} id={1} buttons={buttons} />
      <br />
      <ButtonShow clickFn={btnClick} id={2} buttons={buttons} />
      <br />
      <ButtonShow clickFn={btnClick} id={3} buttons={buttons} />
      <br />
    </div>
  );
}

    完整代码：

    const buttonsInit = [
  {
    name: "A-1",
    clickId: 0,
    buttonId: 1,
  },
  {
    name: "A-2",
    clickId: 0,
    buttonId: 2,
  },
  {
    name: "B-1",
    clickId: 0,
    buttonId: 3,
  },
  {
    name: "B-2",
    clickId: 0,
    buttonId: 4,
  },
];

const ButtonShow = ({ buttons, id, clickFn }) => {
  return (
    <>
      {buttons.map((button) => (
        <button
          onClick={() => clickFn(button.buttonId, id)}
          disabled={button.clickId && button.clickId !== id}
        >
          {button.name}
        </button>
      ))}
    </>
  );
};

function App() {
  const [buttons, setButtons] = useState([...buttonsInit]);

  const btnClick = (btnId, rndId) => {
    setButtons((prev) => {
      return prev.map((btn) => {
        if (btn.buttonId !== btnId) return btn;
        btn.clickId = rndId === btn.clickId ? 0 : rndId;
        return btn;
      });
    });
  };

  return (
    <div className="App">
      <hr />
      <ButtonShow clickFn={btnClick} id={1} buttons={buttons} />
      <br />
      <ButtonShow clickFn={btnClick} id={2} buttons={buttons} />
      <br />
      <ButtonShow clickFn={btnClick} id={3} buttons={buttons} />
      <br />
    </div>
  );
}

    沙箱中的工作示例

    • 1

相关问题