如何仅禁用一个编辑按钮

Question

What i want is, basically, when i click on checkbox, it should disable only that particular todo's edit button, however, when i click on checkbox, it disables the entire edit buttons of the todo's list. Can someone please suggest me ?

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>
        );
      }
    }

Answer 1

You can create a map/object containing disable state with ids as keys and true/false as values.

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]}>

Answer 2

You can solve it by changing the state to track each one of the todos button state

state = { disabled: {} }

And then when you click on a checkbox, you pass the todo id

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

and change the checkbox handler as below:

handleCheckBox = (id) => {
     let disabled = this.state.disabled;
     disabled[id] = !disabled[id];
     this.setState({ disabled });
     }

Then you will be able to disable/enable the right button by

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

Answer 3

This should work

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>