您创建了一个受控组件,它需要一个处理程序来更改状态,并且它的值/检查属性由状态控制。
您需要将
this.handleCheck
指定为 onChange
处理程序,并将 this.state.checked
指定为 checked
属性值:
class Checkbox extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: false
}
this.handleCheck = this.handleCheck.bind(this)
}
handleCheck() {
this.setState({
checked: true
})
}
render() {
return (
<div>
<input
type="checkbox"
checked={this.state.checked}
onChange={this.handleCheck}
/>
</div>
)
}
}
ReactDOM.render(
<Checkbox /> ,
document.getElementById("react-container")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='react-container'></div>
您忘记将
handleCheck
添加到复选框
<div>
<input type = "checkbox" onChange={this.handleCheck} checked={this.state.checked}/>
</div>