react笔记五 ajax from

这篇主要学习Ajax在react中的使用，react中表单及相关的事件的处理

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

npm安装jquery:

npm install jquery

添加一个js文件 ReactAjax.js，加入以下代码

import React from 'react';
import $ from 'jquery';


/**
 * 
 * React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，
 * 当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
 * 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
 * 
 */
class ReactAjax extends React.Component {
    constructor(props) {
        super(props);
        this.state = { users: [] };
    }

    componentDidMount() {
        //请求
        this.serverRequest = $.get(this.props.source, {}, function (result) {
            this.setState({
                users: result
            });
        }.bind(this));
    }

    componentWillUnmount() {
        //组建卸载前 终止请求
        this.serverRequest.abort();
    }

    render() {
        const userList = this.state.users.map((user, index) => <UserList key={index} name={user.created_at
        } />);
        return (
            <div>
                <ul>{userList}</ul>
            </div>
        )
    }
}

class UserList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <li>{this.props.name}</li>
        )
    }
}

export default ReactAjax;

运行：

react表单与事件

import React from 'react';

/**
 * 
 * 要点：ajax表单元素与其他dom元素有所不同，因为表单元素生来就保留一些内部状态。
 *      像input，textarea，select这类表单元素会维持自身状态并根据用户输入更新。
 *      在react中可变的状态通常保存在react组建的state中，并且只能通过setState方法更新。
 * 
 * 
 * 案列中通过onchange时间监听属性值变化，并更新state
 * 
 * 
 */

class FromInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: 'frominput' }
    }

    handleChange = (event) => {
        this.setState({ value: event.target.value });
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <h4>{this.state.value}</h4>
            </div>
        );
    }
}

运行：

如果要提取子组件，加入下面代码

/**
 * 提取部分元素部分  分装子组件
 */

class PartInput extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <input type="text" value={this.props.value} onChange={this.props.handleChange} />
                <h4>{this.props.value}</h4>
            </div>
        )
    }
}

react中下拉菜单的使用

/**
 * 下拉菜单
 */
class PartSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: 'gg' };
    }

    handleChange = (event) => {
        this.setState({ value: event.target.value });
    }

    handleSubmit = (event) => {
        console.log('select value:' + this.state.value)
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    选择您最喜欢的网站
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="gg">Google</option>
                        <option value="rn">Runoob</option>
                        <option value="tb">Taobao</option>
                        <option value="fb">Facebook</option>
                    </select>
                </label>
                <input type="submit" value="提交" />
            </form>
        )
    }
}

react多个表单的使用

/**
 * 多个输入表达区分 当你有处理多个 input 元素时，
 * 你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么
 */
class PartFrom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 2
        };
    }
    handleInputChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({ [name]: value })
    }

    render() {
        return (
            <from>
                <label>
                    是否离开:
                    <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    访客数:
                    <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
                </label>
            </from>
        )
    }
}

注：子组建更新父组建，这个意思不是从父组建传值到子组建，组建的数据流向是单向的，在前面的章节记录过。是在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上，在父组建中更新state值。

扫描二维码关注公众号，回复： 3495789 查看本文章