reactjs - 如何使按钮 1 onClick 以在 React 中启用禁用的按钮 2？

Question

我有 2 级按钮，当单击第 1 级上的某些按钮时，第 2 级按钮被禁用，第 2 级选项是有条件的，它取决于第 1 级。

但是，当单击级别 1 的按钮时，我不确定如何启用级别 2 上的按钮，这取决于在级别 1 上单击的按钮。

我尝试了类似 getElementById 的功能，但它不起作用(它确实改变了按钮样式，就像它被启用一样，但仍然不可点击，甚至不会启用级别 3 上的按钮)。还尝试了 setAttribute，但我可能需要像 state 或 ref 这样的东西，这在这种情况下让我感到困惑，因为我刚刚开始学习 React 和 JS。

import React, {Component} from 'react'


class Example extends Component {
    constructor(props) {
        super(props);
        this.someFunction=this.someFunction.bind(this);
    }
   
    someFunction(e){
        e.stopPropagation()
        var element= document.getElementById(Number.parseInt(e.target.id)+1)
        console.log("Clicked by " + e.target.id) // even if clicking 2 after change this won't print Clicked by 2
       element.disabled=0 //if not null

    }

    render() {
    return <div className="example">

        <button id="1" onClick={this.someFunction}>Level 1</button> {/* this is just example i have, db list of variations and logic*/}
        <button disabled={true} onClick={this.someFunction} id="2">Level 2</button>
        <button disabled={true} onClick={this.someFunction} id="3">Level 3</button>
    </div>


    }


}
export default Example

这是我的想法的一个例子。

在下面的方案中，我画出了我想要实现的目标。基本上 1 级按钮没有 parent ，2 级按钮有一些来自 1 级的 parent ，依此类推，直到最后一个我会生成一些东西。级别 1 和级别 2 之间的链接描述了如果在级别 1 中单击该按钮，则应在级别 2 中启用哪些按钮。

这并不重要，因为真正的问题是出于某种原因，在 React 中我可以启用具有链接的级别 2 中的按钮，但它们变得“不可点击”。

Scheme

Answer 1

您将需要使用状态，以便每个元素或按钮都可以根据状态值呈现禁用或启用状态。如果我们有一个 level 状态值，每个按钮都可以遵守该值，也可以修改该值。

这是带有关卡状态的按钮的简单版本:

const Example = () => {
  const [level, setLevel] = useState(0);

  return (
    <div className="example">
      <button level={1} onClick={() => setLevel(1)} disabled={level !== 0}>
        Level 1
      </button>
      <button level={2} onClick={() => setLevel(2)} disabled={level !== 1}>
        Level 2
      </button>
      <button level={3} onClick={() => setLevel(3)} disabled={level !== 2}>
        Level 3
      </button>
      <div>Level: {level}</div>
    </div>
  );
};

我在末尾添加了一个 div，这样您就可以知道任何给定点的级别。哦，你需要从 react 中导入 useState:

import React, {useState} from 'react'