Wie überprüfe ich, ob die Schaltfläche reactive deaktiviert ist?

Question

Ich habe diesen Code für meine Taste, die nicht, für den Titel funktioniert:

<Button 
     id="completeSelectedButton" 
     title={Boolean(document.getElementById('completeSelectedButton').disabled) ? 'Some of the selected todos is already Complete.' : '' } 
     disabled={Boolean((this.state.checkedIds.length !== 0) && // check if not empty 
          this.state.checkedIds.length === todos.filter(({id, completed}) => this.state.checkedIds.includes(id) && completed === false).length) ? false : true // if it matched, ALL THE CHECKED TODOS ARE UNFINISHED OR HAS completed property === false 
        } 
     onClick={() => { 
      onCompleteMultipleClick(this.state.checkedIds) 
      this.setState({checkedIds:[]}); 
     }} 
     > 

Ich mag den Titel setzen, wenn die Schaltfläche deaktiviert ist, aber ich denke, dass es nicht funktioniert, weil ich diesen Fehler habe Ich denke, React kann es nicht finden?

Uncaught TypeError: Cannot read property 'disabled' of null

Answer 1

Sie sollten selten aus dem DOM in React-Komponenten lesen müssen. Das DOM ist ein Spiegelbild der props und state Ihrer Komponenten, so dass Sie bereits alles wissen, was das DOM Ihnen sagen könnte. In diesem Fall extrahiert den Wert einer Variablen und Bezugs es in beiden Orten:

const disabled = Boolean(
    (this.state.checkedIds.length !== 0) && // check if not empty 
    this.state.checkedIds.length === todos.filter(({id, completed}) => this.state.checkedIds.includes(id) && completed === false).length 
) ? 
    false : 
    true // if it matched, ALL THE CHECKED TODOS ARE UNFINISHED OR HAS completed property === false 

<Button 
    id="completeSelectedButton" 
    title={disabled ? 'Some of the selected todos is already Complete.' : '' } 
    disabled={disabled} 
    onClick={() => { 
    onCompleteMultipleClick(this.state.checkedIds) 
    this.setState({checkedIds:[]}); 
    }} 
> 

Answer 2

Sie verwenden bereits React-Status. Fügen Sie einfach einen Status für Ihre Schaltfläche hinzu oder verwenden Sie einfach Refs und überprüfen Sie entweder den Status oder die Eigenschaften anhand von Referenzen.