各种标签渲染，数据双向绑定

一、渲染元素标签是否显示

在jsx语法中，标签也是一种类型，可以直接赋值给变量，那么我们就可以通过一个flag来判断是否显示该变量，也就是这个标签。

import ReactDOM from 'react-dom';
import React from 'react';
import propTypes from 'prop-types'

class Box extends React.Component {
    constructor() {
        super();
        this.state = {
            isShow: false,
        };
    }
    render() {
        // 通过isShow判断按钮是否显示
        let btn = this.state.isShow ? <button>按钮</button> : null;
        return (
            <div>
                {btn}
            </div>
        );
    }
}
ReactDOM.render(<Box />, document.getElementById('app'));

二、渲染列表

使用古老的循环赋值方式：

class Box extends React.Component {
    constructor() {
        super();
        this.state = {
            list: [
                { name: 'Daotin', age: 18 },
                { name: 'lvonve', age: 19 },
                { name: 'jielun', age: 20 }
            ]
        };
    }
    render() {
        let listLi = [];
        this.state.list.map(item => {
            listLi.push(
                <li>
                    <h3>{item.name}</h3>
                    <p>{item.age}</p>
                </li>
            );
        })
        return (
            <div>
                <ul>{listLi}</ul>
            </div>
        );
    }
}

三、数据双向绑定

新建一个login.js组件用来测试数据的双向绑定。

由于基本上所有组件，场合都会用到 React 插件，也就是需要

import React from 'react'

所以我们把React在config中配置成全局的，这样就不需要每次都写上面的代码了。

let Webpack = require('webpack');

plugins: [
    new Webpack.ProvidePlugin({
        React: 'react'
    })
]

记得修改后服务要重启！

新建的Login组件：

export class Login extends React.Component {
    constructor() {
        super();
        this.state = {
            user: '',
            pwd: ''
        }
    }

    render() {
        let { user, pwd } = this.state;
        return (
            <div>
                <h3>Login</h3>
                用户：<input type="text" value={user} />
                密码：<input type="text" value={pwd} />
            </div>
        );
    }
}

然后在父组件引入：

import { Login } from './login';

ReactDOM.render(<Login></Login>, document.getElementById('app'));

我们发现input根本无法输入，这是因为react在初始化的时候，user和pwd为空，就强制视图为空，且无法修改。

如果想修改可以将value改为defaultValue。

但是这时候，虽然可以修改视图input，但是不能同步到数据模型中。

这时候就只能通过手动绑定onChange事件获取input中的数据，然后同步到数据模型。

export class Login extends React.Component {
    constructor() {
        super();
        this.state = {
            user: '',
            pwd: ''
        }
        this.userInput = this.userInput.bind(this);
        this.pwdInput = this.pwdInput.bind(this);
    }

    render() {
        let { user, pwd } = this.state;
        return (
            <div>
                <h3>Login</h3>
                用户：<input type="text" defaultValue={user} onChange={this.userInput} />
                密码：<input type="text" defaultValue={pwd} onChange={this.pwdInput} />
                <span>用户名：{user}</span>
                <span>用户名：{pwd}</span>
            </div>
        );
    }
    // 用户名输入onChange事件
    userInput(e) {
        this.setState({
            user: e.target.value
        });
    }
    // 密码输入onChange事件
    pwdInput(e) {
        this.setState({
            pwd: e.target.value
        });
    }
}

但是有时候我们并不需要实时的进行数据的双向绑定，而是在点击按钮提交的时候才核实输入的数据。

我们添加一个按钮进行数据的提交：

export class Login extends React.Component {
    constructor() {
        super();
        this.state = {
            user: '',
            pwd: ''
        }
        this.submit = this.submit.bind(this);
    }

    render() {
        let { user, pwd } = this.state;
        return (
            <div>
                <h3>Login</h3>
                用户：<input type="text" defaultValue={user} ref="userObj" />
                密码：<input type="text" defaultValue={pwd} ref="pwdObj" />
                <button onClick={this.submit}>提交</button>
            </div>
        );
    }
    submit() {
        let data = {
            userValue: this.refs.userObj.value,
            pwdValue: this.refs.pwdObj.value,
        }
        // 拿到input数据
        console.log(data);
    }
}

在标签中添加一个ref属性，然后在获取的时候，通过this.refs.xxx就能够拿到这个元素的DOM对象了。