Как отключить только одну кнопку редактирования

Question

Что я хочу, так это то, что когда я нажимаю на флажок, он должен отключить только кнопку редактирования этого конкретного задания, однако, когда я нажимаю на флажок, он отключает все кнопки редактирования в списке дел. Может кто-нибудь предложить мне?

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

Вы можете создать карту / объект, содержащий отключенное состояние с идентификаторами в качестве ключей и истиной / ложью в качестве значений.

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

Это должно работать

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>

Answer 3

Вы можете решить эту проблему, изменив состояние, чтобы отслеживать каждое состояние кнопки todos

state = { disabled: {} }

И затем, когда вы нажимаете на флажок, вы передаете задачу id

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

и измените обработчик флажка, как показано ниже:

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

Тогда вы сможете отключить / включить правую кнопку с помощью

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