即使在ReactJS中启用了按钮，OnClick功能也无法工作

Question

我有一个输入字段和提交按钮，但在输入为空之前，该按钮一直处于禁用状态。否则，应启用它。然而，即使启用了按钮，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>

输入为：

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

功能是：

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

Answer 1

这是因为你的按钮总是被禁用的，就像在按钮中一样，disabled属性总是true。您应该使用state进行操作。

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;

Answer 2

使用状态处理禁用布尔值，最初应将其设置为true，然后根据禁用的事件值设置为false

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"
/>