React 基础
不废话直接上代码(补卡:2020-12-28 )
//为了方便写demo,就直接csdn引用就可以写react了
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
基础渲染
<div id="root"></div>
//type 必须是text/babe
<script type="text/babel">
//方法组件
function tick() {
const element = (
<div>
{/*
jsx里注释是这样的,不能用//
<div>123</div>
*/}
<h2>It is {new Date().toLocaleTimeString()}</h2>
</div>
);
//dom 渲染
ReactDOM.render(
// 元素
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
//运行结果
方法
class ParentDom extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<form action="http://www.baidu.com">
<h1 onClick={(e)=>{this.parentEvent1}}>nihc</h1>
<button onClick={this.parentEvent}>提交</button>
</form>
</div>
)
}
//这里必须要用箭头函数,this问题
parentEvent1=()=>{
console.log(123)
}
parentEvent=(e)=>{
console.log(e)
// e.defaultPrevented()
e.preventDefault()
}
}
补充:
//不用箭头函数的情况
constructor(props) {
super(props);
//这里要绑定this
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
}
或者在绑定的时候 方法.bind(this)
onClick={this.handleToggleClick.bind(this)}
属性
获取临时属性
//e.target.getAttribute
class ParentDom extends React.Component{
constructor(props){
super(props)
}
click = e => {
console.log(e.target.getAttribute("data-row"));
};
render() {
return (
<div>
<div data-row={"属性1"} data-col={"属性 2"} onClick={this.click}>
点击获取属性
</div>
</div>
);
}
}
属性使用
笔记:
react 中文文档
jsx里注释不能用//
input 设置默认值(回显数据)
要用 defaultXxxxxx={this.props.xx}
value 改成defaultValue
checked改成defaultChecked