Атрибут Отключенный материал-пользовательский интерфейс не работает

Question

Я пытаюсь отключить кнопку редактирования, когда нажимаю кнопку «Завершить», но она не работает. Я перешел в состояние в атрибуте disabled, но он, похоже, ничего не делает, не знаю, может быть, из-за асинхронного характера setState. Я передал обратный вызов при вызове метода setState, и кажется, что данные регистрируются случайным образом. Может кто-нибудь подсказать, что нужно сделать?

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

Вместо использования id для изменения состояния используйте index массива для обновления состояния

Создайте массив в компоненте state, который отслеживает атрибут disabled каждой кнопки

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

В componentDidMount инициализировать массив в соответствии с задачами

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

Теперь используйте значение в состоянии кнопок для отключенного атрибута кнопки на основе индекса отображаемого компонента.

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

Всякий раз, когда нажимается CheckBox, передайте индекс функции handleChange и обновите значение, соответствующее значению индекса

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

Проверьте демонстрацию SandBox в по этой ссылке