每天记录一个知识点（React 基础渲染，方法，属性）

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