时间戳

首页 > 解决方案 > 如何禁用列表中的单个按钮？

reactjs - 如何禁用列表中的单个按钮？

问题描述

我有一个项目列表（动态创建），每个项目都有各自的删除按钮。我试图在点击时禁用单个按钮。我可以使用 disabled prop 和 setState 来禁用单个按钮。但是，这可能不适合我当前动态创建列表项的用例。如果使用 setState 方法，我可能需要为创建的每个项目创建额外的状态。

谢谢你的建议。

编辑：我想生成一个包含 N 个项目的列表，每个项目都有一个删除操作按钮。并且，每个删除按钮都应该在第一次单击处理后禁用（以防止双击）。

如前所述，在按钮上使用 'disabled={condition}' 可能不是一个好主意。这是因为列表是动态创建的，其中包含 N 个项目。如果使用方法（'disabled={condition}'），我需要有 N 个状态变量来跟踪每个删除按钮。

<List>
{ items.map( item => 
   <ListItem>
      <ListItemText
          primary="Single-line item"
          secondary={secondary ? 'Secondary text' : null}
       />
   <ListItemSecondaryAction>
       <IconButton aria-label="Delete">
           <DeleteIcon />
       </IconButton>
   </ListItemSecondaryAction>
  </ListItem>
  )
}
</List>

标签： reactjsmaterial-ui

解决方案

你可以使用这样的东西，例如：

let button_variables = [
{
    label:"save_btn",
    isDisabled : false
},
{
   label:"cancel_btn",
   isDisabled : true
}
]

and then u can map those to the buttons something like below ,

button_variables.map(function (data, index) {
  <button disabled={data.isDisabled}> {data.label} </button>
});

Note :  If disabled didnt worked means, u can change className dynamically instead of that .
Ex : 
className = {data.isDisabled ? activeClass : disabledClass}

推荐阅读