Javascript 如何仅禁用一个编辑按钮

基本上，我想要的是，当我点击复选框时，它应该只禁用特定todo的编辑按钮，然而，当我点击复选框时，它会禁用todo列表中的整个编辑按钮。有人能推荐我吗

class App extends Component {
      state = {
        disable: false
      }

     handleCheckBox = () => {
       this.setState({disable: !this.state.disable})
     }


      render() {
        const {data: {loading, todos}} = this.props;
        if(loading) {
          return null;
        }
        return (
          <div style={{display: "flex"}}>
           <div style={{margin: "auto", width: 400 }}>
            <Paper elevation={1}>
            <Form submit={this.createTodo}/>
            <List>
              {todos.map(todo => (
                <ListItem
                  key={todo.id}
                  role={undefined}
                  dense
                  button
                  onClick={() => this.updateTodo(todo)}
                >
                  <Checkbox
                    onClick={this.handleCheckBox}
                    checked={todo.complete}
                    tabIndex={-1}
                    disableRipple
                  />
                  <ListItemText primary={todo.text} />
                  <ListItemSecondaryAction>
                    <Button mini color="secondary" variant="fab" disabled={this.state.disable}>
                     <Icon>edit_icon</Icon>
                    </Button>
                    <IconButton onClick={() => this.removeTodo(todo)}>
                      <CloseIcon />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
               </List>
              ))}
            </List>
            </Paper>
          </div>
          </div>
        );
      }
    }

类应用程序扩展组件{
状态={
禁用：false
}
handleCheckBox=（）=>{
this.setState（{disable:！this.state.disable}）
}
render（）{
const{data:{loading，todos}}=this.props；
如果（装载）{
返回null；
}
返回(
{todo.map（todo=>(
this.updateTodo（todo）}
>
编辑图标
这个.removeTodo（todo）}>
))}
);
}
}

您可以通过更改状态来跟踪每个TODO按钮的状态来解决此问题

state = { disabled: {} }

然后单击复选框时，传递todo

id

<Checkbox onClick={() => this.handleCheckBox(todo.id)} />

然后，您将能够通过以下方式禁用/启用右按钮：

<Button mini color="secondary" variant="fab" disabled={this.state.disabled[tod.id]}>

---

您可以创建一个包含禁用状态的映射/对象，ID作为键，true/false作为值

state = { buttons = { } };
handleCheckBox = id => {
  const state = { buttons: {...this.state.buttons, id: !this.state.buttons[id] }};
  this.setState(state);
}

<Button mini color="secondary" variant="fab" disabled={!this.state.buttons[todo.id]}>

state={buttons={}；
handleCheckBox=id=>{
const state={buttons:{…this.state.buttons，id:！this.state.buttons[id]}；
本.设置状态（状态）；
}

这应该行得通

handleCheckBox = (todo) => {
    todo.disabled = !todo.disabled;
}

<Checkbox
    onClick={() => {this.handleCheckBox(todo)} }
    checked={todo.complete}
    tabIndex={-1}
    disableRipple
/>

<Button mini color="secondary" variant="fab" disabled={todo.disabled}>
    <Icon>edit_icon</Icon>
</Button>

handleCheckBox=（todo）=>{
todo.disabled=！todo.disabled；
}
{this.handleCheckBox（todo）}
选中={todo.complete}
tabIndex={-1}
无效波纹
/>
编辑图标

您只有一个禁用的状态变量。也许你可以在你的

todo

上设置一个

disabled

属性，或者在所有被禁用的todo的状态下保留一个数组？嘿，我在disabled[id]处遇到了意外的令牌错误

handleCheckBox = (todo) => {
    todo.disabled = !todo.disabled;
}

<Checkbox
    onClick={() => {this.handleCheckBox(todo)} }
    checked={todo.complete}
    tabIndex={-1}
    disableRipple
/>

<Button mini color="secondary" variant="fab" disabled={todo.disabled}>
    <Icon>edit_icon</Icon>
</Button>