反応中のボタンが無効になっているかどうかを確認するにはどうすればいいですか？

Question

私は、動作しません、私のボタンのためにこのコードを持っているタイトルのために：

<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:[]}); 
     }} 
     > 

私はボタンが無効になっている場合は、タイトルを設定したいが、私は、私はこのエラーを持っていますので、それが動作していないと思います私はReactがそれを見つけることができないと思う？

Uncaught TypeError: Cannot read property 'disabled' of null

Answer 1

ReactコンポーネントのDOMから読み込む必要はほとんどありません。 DOMは、コンポーネントのpropsとstateを反映しているので、DOMがあなたに伝える可能性のあることはすべて知っています。この場合、値を変数に抽出し、両方の場所で参照してください：

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

すでに反応状態が使用されています。単にあなたのボタンの状態を追加するか、またはRefsを使用して、状態別にプロパティをチェックしてください。