react菜鸟教程笔记（脚手架和启动项目见菜鸟）

https://www.runoob.com/react/react-state.html

1、状态和变量的使用

class Clock extends React.Component {
    // 变量存放--固定写法
    constructor() {
        super();
        this.state = {showWarning: 'false'}
      };

      //调用的方法---更改数据
      tick=()=>{
        this.setState({
            showWarning: 123
        });
      }

    render() {
        return (
            <div>
                {/* 获取数据 */}
                {this.state.showWarning}
                <button onClick={this.tick}>点击</button>
            </div>
        )
    }}

export default Clock;

 

2、组件的使用

(注意组件的函数首字母要大写)

import React from 'react'

function Fuck(){
    return(<p>123</p>)
}
class Clock extends React.Component {
    render() {
        return (
            <div>
                <Fuck ref="fuck"/>
            </div>
        )
    }}

export default Clock;

 

3、函数调用 和 ref 

https://www.cnblogs.com/kaibindirver/p/17349356.html   (多种方法)

菜鸟教的

class Clock extends React.Component {
    render() {
        return (
            <div>
                <input ref="myInput" />
                <button onClick={this.handleClick.bind(this)}>123</button>
            </div>
        )
    };
    handleClick(){
        this.refs.myInput.focus()
    }
}