Question

我有一个项目列表（动态创建），每个项目都有各自要删除的按钮。我试图禁用onclick上的单个按钮。我能够使用禁用的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>

Answer 1

您可以使用类似这样的内容，例如：

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}

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

1 个答案: