我有默认情况下被禁用的按钮。但是当复选框被选中时,按钮将被启用,使用 ref 我启用按钮。按钮激活后,单击事件不会触发。如果没有默认禁用,按钮的点击事件就会被触发。
class TodoApp extends React.Component {
onChangeCheckBox(event) {
if(event.target.checked) {
this.actionButtonRef.disabled = "";
}
else {
this.actionButtonRef.disabled = "disabled";
}
}
render() {
return (
<div>
<input
type="checkbox"
ref={element => {
this.checkboxAllRef = element;
}}
onChange={event => this.onChangeCheckBox(event)}/> Checbox
<br />
<button
type="button"
className="btn btn-danger"
ref={element => {
this.actionButtonRef = element;
}}
onClick={event => {
alert("clicked");
}}
disabled="disabled">Button</button>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
here is jsfiddle
最佳答案
React 不允许手动更改 DOM 元素(实际上是说虚拟 DOM)。
您需要保持启用或禁用状态。并根据状态变化工作:
类构造器:
constructor(props) {
super(props);
this.state = {
checked: false
};
this.onChangeCheckBox = this.onChangeCheckBox.bind(this);
this.onClickButton = this.onClickButton.bind(this);
}
事件处理程序:
onChangeCheckBox(e) {
this.setState({
checked: e.target.checked,
});
}
onClickButton(e) {
alert(e);
}
渲染 JSX:
render() {
return (
<div>
<input
type="checkbox"
checked={this.state.checked}
onChange={this.onChangeCheckBox}
/>
<button
type="button"
disabled={!this.state.checked}
onClick={this.onClickButton}>Click</button>
</div>
);
}
}
这是一个 demo .
关于reactjs - 默认禁用按钮单击事件不会在 reactjs 上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50024811/