即使在ReactJS中启用了按钮，OnClick函数也不起作用

我有一个输入字段和提交按钮，但该按钮保持禁用状态，直到输入为空。否则，应该启用它。但是，即使在按钮启用之后，onclick功能似乎也不起作用。我该如何解决这个问题

按钮包括：

<button className="New_Project_Modal_Button">Cancel</button>
<button className="New_Project_Modal_Button" 
          disabled={true} 
          style={{ opacity: 0.7,}}
          onClick={() => { this.createNewProject()}}>
      Create
</button>

---

Handle disable boolean using state，最初应将其设置为

true

，然后根据事件值将disabled设置为

false

constructor(props) {
    super(props);
    this.state = {
      isDisabled: true,
    };
  }

{
这个.createNewProject（）；
}}
>
创造

---

这是因为您的按钮始终处于禁用状态，就像在按钮中一样，disabled属性始终为true。您应该改为使用状态进行操作

class MyComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      disabled: true
    };
  }
  handleProjectNameChange = (event) => {
    const createButton = document.getElementsByClassName(
      "New_Project_Modal_Button"
    )[1];

    if (event.target.value) {
      this.setState({ disabled: false });
      createButton.style.opacity = 1;
    } else {
      this.setState({ disabled: true });
      createButton.style.opacity = 0.7;
    }
  };

  createNewProject = () => {
    alert("Clicked"); //whatever your function is
  };
  render() {
    return (
      <div>
        <input
          id="New_Project_Modal_Name_Input"
          onChange={this.handleProjectNameChange}
          placeholder="Project Name"
        />

        <button className="New_Project_Modal_Button">Cancel</button>
        <button
          className="New_Project_Modal_Button"
          disabled={this.state.disabled}
          style={{ opacity: 0.7 }}
          onClick={() => {
            this.createNewProject();
          }}
        >
          Create
        </button>
      </div>
    );
  }
}

export default MyComponent;

类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
此.state={
残疾人士：对
};
}
handleProjectNameChange=（事件）=>{
const createButton=document.getElementsByClassName(
“新建项目模式按钮”
)[1];
if（event.target.value）{
this.setState（{disabled:false}）；
createButton.style.opacity=1；
}否则{
this.setState（{disabled:true}）；
createButton.style.opacity=0.7；
}
};
createNewProject=（）=>{
警报（“单击”）；//无论您的函数是什么
};
render（）{
返回(
取消
{
这个.createNewProject（）；
}}
>
创造
);
}
}
导出默认MyComponent；

constructor(props) {
    super(props);
    this.state = {
      isDisabled: true,
    };
  }

 handleProjectNameChange = (event) => {
    const createButton = document.getElementsByClassName(
      "New_Project_Modal_Button"
    )[1];
    if (event.target.value) {
      this.setState({ isDisabled: false }); 
      createButton.style.opacity = 1;
    } else {
      this.setState({ isDisabled: true });
      createButton.style.opacity = 0.7;
    }
  };

          <button
          className="New_Project_Modal_Button"
          disabled={this.state.isDisabled} //initiall is set to true
          style={{ opacity: 0.7 }}
          onClick={() => {
            this.createNewProject();
          }}
        >
          Create
        </button>

          <input
          id="New_Project_Modal_Name_Input"
          onChange={this.handleProjectNameChange}
          placeholder="Project Name"
        />

class MyComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      disabled: true
    };
  }
  handleProjectNameChange = (event) => {
    const createButton = document.getElementsByClassName(
      "New_Project_Modal_Button"
    )[1];

    if (event.target.value) {
      this.setState({ disabled: false });
      createButton.style.opacity = 1;
    } else {
      this.setState({ disabled: true });
      createButton.style.opacity = 0.7;
    }
  };

  createNewProject = () => {
    alert("Clicked"); //whatever your function is
  };
  render() {
    return (
      <div>
        <input
          id="New_Project_Modal_Name_Input"
          onChange={this.handleProjectNameChange}
          placeholder="Project Name"
        />

        <button className="New_Project_Modal_Button">Cancel</button>
        <button
          className="New_Project_Modal_Button"
          disabled={this.state.disabled}
          style={{ opacity: 0.7 }}
          onClick={() => {
            this.createNewProject();
          }}
        >
          Create
        </button>
      </div>
    );
  }
}

export default MyComponent;