时间戳

首页 > 解决方案 > 有没有聪明的方法在 React 中禁用多个 div？

reactjs - 有没有聪明的方法在 React 中禁用多个 div？

问题描述

考虑以下代码，其中必须禁用多个 div：

<Select disabled={isDisabled}>
 ...
</Select>
<Input disabled={isDisabled}>
 ...
</Input>
<Button disabled={isDisabled}>
 ...
</Button>

有没有更好的方法，比如

divsToDisable = [ select, input, button ];
 ...
func() // being a function that returns true or false based on the div that is calling it
{
...
}

<Select disabled={func()}>
 ...
</Select>
<Input disabled={func()}>
 ...
</Input>
<Button disabled={func()}>
 ...
</Button>

标签： reactjsfrontend

解决方案

如果您正在尝试实现一个表单（猜测这是因为您正在使用输入），您可以描述您想要在字段集中禁用的输入并将字段集的disabled属性设置为 true 这将导致禁用所有输入一个字段集，一个简单的 HTML 实现。

在此处输入图像描述

您在组件内的渲染函数将如下所示：-

isDisabled = () =>{
    //disabling logic
}

render() {
  return (
    <form>
      <fieldset disabled={this.isDisabled()}>
        <legend>Personalia:</legend>
        Name: <input type="text" />
        Email: <input type="text" />
        Date of birth: <input type="text" />
      </fieldset>
    </form>
  );
}

但是，如果您不需要禁用任何表单字段，则在您要禁用的所有 div 周围使用包装器，并在 div 上添加覆盖以创建禁用效果，如下所示。

推荐阅读