<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function(){
return <div>测试:<input checked="true" id="checkbox" type="checkbox" ref="checkbox" />这个checkbox怎么不能点击或者用js更改状态了呢?</div>
}
})
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
</script>
</body>
</html>
因为你这种写法是受控组件,可用用
<div>测试:<input onChange={()=>{this.setState({"checked": !this.state.checked})}} checked={this.state.checked} id="checkbox" type="checkbox" ref="checkbox" />这个checkbox怎么不能点击或者用js更改状态了呢?</div>
这种形式改造。也可以使用
<div>测试:<input defaultChecked="true" id="checkbox" type="checkbox" ref="checkbox" />这个checkbox怎么不能点击或者用js更改状态了呢?</div>
变成非受控组件。