我正在修订Core React.js概念,并且很难做到这一点。 我有一个显示复选框的App组件,一个显示消息和计数器值的div部分以及两个用于更改div部分消息并增加计数器的按钮 该组件具有消息,计数器和主题的状态数据。
我要实现的是这个。 首先,我想通过使用preventDefault防止复选框默认行为 其次,我想通过单击组件的按钮元素之一来将复选框从未选中切换为选中。
这是我写的代码
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super (props);
this.state = {
message: 'Ready',
counter: 0,
theme: 'secondary'
}
}
handleEvent = (event, newTheme) => {
event.persist();
this.setState({
counter: this.state.counter + 1,
theme: newTheme
},() => {
this.setState({ message: `${event.type}: ${this.state.counter}`});
this.toggleCheckBox()
});
}
toggleCheckBox = (event) => {
if (this.state.counter === 0) {
event.preventDefault();
}
}
render() {
return (
<div className="m-2">
<div className="form-check">
<input className="form-check-input" type="checkbox"
onClick={ this.toggleCheckBox } />
<label>This is a checkbox</label>
</div>
<div className={ `h4 bg-${this.state.theme}
text-white text-center p-2`}>
{ this.state.message }
</div>
<div className="text-center">
<button className="btn btn-primary"
onClick={ (e) => this.handleEvent(e, "primary") }>
Normal
</button>
<button className="btn btn-danger m-1"
onClick={ (e) => this.handleEvent(e, "danger") }>
Danger
</button>
</div>
</div>
)
}
}