如何在反应中独立设置按钮点击？

Question

我想弄清楚如何设置一个在使用 .map 函数时可以独立禁用的按钮。因此，只要单击按钮，我就会创建一个状态，它会禁用该特定按钮。但是，它只会禁用所有不是我想要的按钮。有没有办法让按钮有自己的点击事件，可以根据索引禁用？

  const [click, setClick] = useState(false);
  const array = ["item 1", "item 2", "item 3"];

  const disableClick = () => {
    setClick(true);
  };
  
  return (
    <div className="App">
      {array.map((item) => (
        <div>
          <h2>{item}</h2>
          {!click ? (
            <button onClick={disableClick}>CLICK {item}</button>
          ) : (
            <button disabled>Button clicked</button>
          )}
        </div>
      ))}
    </div>
  );

Answer 1

将点击处理程序和 useState 移到单独的组件中。

const ButtonView = (textContent) => {
  const [disabled, setDisabled] = useState(false);

  const onClick = () => {
    setDisabled(true);
  };

  if (disabled) {
    return <button disabled={disabled}>Button clicked</button>;
  }

  return <button onClick={onClick}>CLICK {textContent}</button>;
};

export const View = () => {
  const array = ["item 1", "item 2", "item 3"];
  
  return (
    <div className="App">
      {array.map((item, key) => (
        <div key={key}>
          <h2>{item}</h2>
          <ButtonView textContent={item} />
        </div>
      ))}
    </div>
  );
};

或者这样做：

const ButtonView = (textContent) => {
  const [disabled, setDisabled] = useState(false);

  const onClick = () => {
    setDisabled(true);
  };
  const content = disabled ? "Button clicked" : textContent
  return <button disabled={disabled} onClick={onClick}>CLICK {content}</button>;
};

Answer 2

Disable 接受一个你可以提供给它的参数 <button disabled={click? true:false} >Button clicked</button>

Is there a way to make the buttons have their own click event which can be disabled according to the index?

是的，怎么样？我们可以将其设置为包含按钮名称 const [disabledBtn, setDisabledBtn] = useState("item 1");，而不是将点击状态设置为 true 或 false，然后我们可以将其与地图中的项目进行比较。 <button disabled={disabledBtn == item ? true:false} >Button clicked</button>

此代码渲染按钮时第一个按钮默认禁用，如果用户单击其他可用按钮之一，它将触发重新渲染并且 btn 将被禁用。您应该为您的子组件添加一个键以保持渲染之间的唯一性。

这段代码应该可以回答您的问题

const [disabledBtn, setDisabledBtn] = useState("item 1");
const array = ["item 1", "item 2", "item 3"];

const handleDisableClick = (item) => {
  setDisabledBtn(item);
};

return (
  <div className="App">
    {array.map((item, idx) => (
      <div key={idx}>
        <h2>{item}</h2>
        <button
          disabled={disabledBtn == item ? true : false}
          onClick={() => handleDisableClick(item)}
        >
          Button clicked
        </button>
      </div>
    ))}
  </div>
);

如何在反应中独立设置按钮点击？

How to independently set a button click in react?

javascript

reactjs

use-state