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

您可以创建一个包含禁用状态的地图/对象，其中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]}>

Answer 2

您可以通过更改状态以跟踪每个待办事项按钮状态来解决它

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

Answer 3

这应该有效

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>

如何仅禁用一个编辑按钮

3 个答案: