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找不到它？

未捕获的TypeError：无法读取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

您已使用React状态。只需为按钮添加一个状态，甚至可以使用Refs并通过refs检查状态或属性。

如何检查反应中的按钮是否被禁用？

2 个答案: