1 Star 0 Fork 0

Hanley / study-front

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
41th.html 1.49 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
hanley 提交于 2018-07-25 22:22 . react component lifecycle
<!DOCTYPE html>
<html>
<head>
<title>react-双向数据绑定</title>
<meta charset="UTF-8" />
<script src='../node_modules/react/umd/react.development.js'></script>
<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
<script src='../node_modules/babel-standalone/babel.min.js'></script>
<script>
/**
约束性与非约束性
1.约束性收到react管理,state.xxx,同时state也用于双向数据绑定
2.非约束性不受react管理,相当于原生js,例如 defaultValue ?
*/
</script>
</head>
<body>
<div id="my"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor(){
super();
this.state = {
value:'abc'
};
};
handleChange(e){
this.setState({
value:e.target.value
})
};
render(){
return (
<div>
<p>
<input type="text" defaultValue="123"/>
</p>
<p>
<input type="text" value={this.state.value}
onChange={(e)=>this.handleChange(e)}/>
<span>{this.state.value}</span>
</p>
</div>
)
}
};
ReactDOM.render(
<Hello/>,
document.getElementById('my')
)
</script>
</body>
</html>
1
https://gitee.com/thanlin/study.git
git@gitee.com:thanlin/study.git
thanlin
study
study-front
master

搜索帮助

14c37bed 8189591 565d56ea 8189591