react框架学习入门（二）

由于之前直接上手的是react-native，因此再来学习react框架的时候感觉轻松不少。本文按照菜鸟教程练习了一些使用方法，仅供参考。

github：https://github.com/hushaohhy/react-router-dom-demo

study.js（子组件）

// 该组件是菜鸟教程上的学习内容
import React, { Component } from 'react';

export default class Study extends Component{
    constructor(props) {
        // 组件的建立首先调用该部分
        super(props)
        // 在constructor中是唯一可以直接对state进行设置值的，其它位置只能使用this.setState()
        this.state = {
            arr1:['apple','orange','pear'],// 测试jsx中直接展开数组
            listArr:[
                'list1',
                'list2',
                'list3',
                'list4',
                'list5',
            ],// 测试react中渲染列表
            inputVal:'输入内容后面对应更新',// 测试input的内容
        }
    }
    componentWillMount() {
        // 准备加载组件
    }

    render() {
        // return中的语法就是jsx语法
        return (
            <div className="study" style={styles.study}>
                <p>在花括号中使用表达式{`1+1=${1+1}`}</p>
                <hr/>
                <div>
                    这是注释代码
                    {/*code*/}
                </div>
                <div>
                    这是测试数组的内容：{this.state.arr1}
                </div>
                <div>
                    获得父组件传来的参数：{this.props.pageId}
                </div>
                <div>
                    点击按钮后更改父组件的内容：<button onClick={this.changeFathterComponent.bind(this,'变化后的内容',this.props.buttonCallback)}>更改父组件中button的内容</button>
                </div>
                <div>
                    react中的列表：
                    <ul>
                        {
                            this.state.listArr.map((item,index)=>{
                                return (
                                    <li key={index}>{item}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div>
                    react中的表单;
                    <input type="text" value={this.state.inputVal} onChange={this.inputChange.bind(this)}/>
                    {this.state.inputVal}
                </div>
                <div>
                    react中的refs：
                    <input type="text" ref="testInput" defaultValue={`123456456`}/>
                </div>
            </div>
        )
    }
    componentDidMount() {
        // 挂载完组件后执行该部分
        console.log(this.refs.testInput.value)
    }

    changeFathterComponent(text,fun) {
        fun(text)
    }

    // input变化时候调用的方法
    inputChange(event) {
        // console.log(event.target.value)
        this.setState({
            inputVal:event.target.value
        })
    }
}

const styles = {
    study:{
        border:'1px red solid',
        fontSize:'30px',
        color:'#f00'
    }
}

Page1.js(父组件)

import React, { Component } from 'react';
import Study from './study'

export default class Page1 extends Component{
    constructor(props) {
        super(props)
        this.state={
            btnText:'goPage2'
        }
    }
    goRouter(url) {
        this.props.history.push({pathname:url,state:{'day':'所传参数'}})
    }
    changeButton(text) {
        console.log(this)
        this.setState({
            btnText:text
        })
    }
    render() {
        return (
            <div>
                <h1>这是page1页面组件</h1>
                <button onClick={this.goRouter.bind(this,'/page2')}>{this.state.btnText}</button>
                <div>
                    这是study的组件
                    <hr/>
                    <Study pageId="123456" buttonCallback={this.changeButton.bind(this)}/>
                </div>
            </div>
        )
    }
}