Material-UI Disabled属性不起作用

Question

I'm trying to disable the edit button once i click on complete but it is not working. I have passed in the state in disabled attribute but it seems not doing anything, don't know maybe because of setState's asynchronous nature. I passed callback while calling setState method and it seems logging data randomly, Can someone suggest what should be done ?

class App extends Component {
          state = {
             buttons: {
               id: "test"
             }
           };

          handleCheckBox = id => {
              let buttons = Object.assign({}, this.state.buttons);
              buttons.id = !this.state.buttons[id]
              this.setState({buttons}, ()=>console.log(this.state.buttons));
            }
          render() {
            return (
                <div>
                  {todos.map(todo => (
                  <List key={todo.id}>
                    <ListItem
                      role={undefined}
                      dense
                      button
                    >
                      <Checkbox
                        onClick={()=>this.handleCheckBox(todo.id)}
                        checked={todo.complete}
                        tabIndex={-1}
                        disableRipple
                      />
                      <ListItemText primary={todo.text} />
                      <ListItemSecondaryAction>
                        <Button mini color="secondary" variant="fab" disabled={this.state.buttons[todo.id]}>
                         <Icon>edit_icon</Icon>
                        </Button>
                        ListItemSecondaryAction>
                    </ListItem>
                   </List>
                  ))}
              </div>
            );
          }
        }

Answer 1

Instead of using id to change the state use index of Array to update the state

Create an array in Component state which tracks the disabled attribute of each buttons

 state = { buttons: Array(todos.length).fill(false), }; 

In componentDidMount initialise the array according to todos

 componentDidMount(){ const buttons=this.state.buttons.slice(); for(var i=0;i<buttons.length;i++) buttons[i]=todos[i].complete; this.setState({buttons:buttons}) } 

Now use the value in buttons state for disabled attribute of button based on the index of the component being rendered.

 <Button mini color="secondary" variant="fab" disabled={buttons[todos.indexOf(todo)]}> 

Whenever CheckBox is clicked pass the index to the handleChange function and update the value corresponding to the index value

 <Checkbox onClick={() =>this.handleCheckBox(todos.indexOf(todo))} checked={buttons[todos.indexOf(todo)]}{...other} /> 

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