Question

我需要一些帮助，因为我不知道如何使用功能性的React管理已禁用的按钮。

首先， isDisabled 函数保持条件，并据此设置按钮状态，但是我不确定在哪里调用该函数。该按钮包含一个禁用的道具，该道具接收在开始时声明的 disabled 状态。

下面是到目前为止我尝试过的代码：

const MainComponent = ({component}) => {
 const [disabled, setDisabled] = useState('');

const isDisabled = () => {
 if (component.status === 'disabled') {
   setDisabled();
  };
}
 
 return (
  <div>
 <Button> 
 onClick={createItem}
 disabled={disabled}
 Button
 <Button/>
 </div>
 )}

如果我的组件状态为禁用，您能否提供一些指导并帮助我如何使按钮保持禁用状态？

谢谢。

Answer 1

有多种方法可以做到这一点。这将是最简单的方法（但请继续阅读）：

const MainComponent = ({component}) => {
  const [disabled, setDisabled] = useState(false);

  return (<div>
  <Button
    onClick={() => {createItem(); setDisabled(true);}}
    disabled={disabled}
  >
    Button
    <Button/>
  </div>);
};

但是，由于createItem没有出现在您的代码中，因此我认为它是组件父级作用域中的一个函数。如果是这种情况，那么应该在那里跟踪状态，并且您应该摆脱该组件中的useState。然后，您只需使用（反应式）道具来设置按钮状态：

const MainComponent = ({component, createItem}) => {
  return (<div>
    <Button
      onClick={createItem}
      disabled={component.status === 'disabled'}
    >
      Button
    <Button/>
  </div>);
};

如果状态为禁用，则禁用按钮

1 个答案: