如何只禁用一个编辑按钮答案

【问题标题】：How to disable only one edit button如何只禁用一个编辑按钮
【发布时间】：2018-06-30 22:29:57
【问题描述】：

我想要的是，基本上，当我点击复选框时，它应该只禁用那个特定的待办事项的编辑按钮，但是，当我点击复选框时，它会禁用待办事项列表的整个编辑按钮。有人可以推荐我吗？

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

【问题讨论】：

你只有一个disabled 状态变量。也许您可以在您的todos 上拥有一个disabled 属性，或者在您的状态下保留一个包含所有禁用的待办事项的数组？

标签： javascript reactjs material-ui

【解决方案1】：

您可以创建一个包含禁用状态的地图/对象，其中 id 作为键，真/假作为值。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以通过改变状态来跟踪每个待办事项按钮的状态来解决

state = { disabled: {} }

然后当你点击一个复选框时，你传递了 todo 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]}>

【讨论】：

嘿，我在 disabled[id] 处遇到意外的令牌错误