从零开始 React Native (5) React 数据传递_表单_函数复用_动画

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liudao7994/article/details/71123830

数据传递表单函数复用_动画

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="babel.min.js"></script>
    <script type="text/babel" src="05.js"></script>
    <style type="text/css">
        .text {
            color: red;
        }
    </style>
    <title>数据传递_表单_函数复用_动画</title>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>

第一个js

/**
 * Created by liuml on 2017/4/28.
 */

//改变子组件的属性值,传参

//表单
//提交数据的两种做法:
//1.直接提交表单,跳转,整个页面刷新(过时的做法)
//2.屏蔽表单的默认提交行为,通过ajax提交数据,服务器响应成功之后在跳转(类似于Android)

//案例:下拉列表(子组件)的数据发生改变,表单(父组件)能够获取到,用于后面的提交
//子组件向父组件传递参数

//流程
//1.通过handleSelectChange属性,传入父组件的handleChange函数
//2.当子组件的onChange事件触发,调用this.props.handleSelectChange->父组件的handleChange函数
//主要思路:
//子组件委托父组件处理


/*   //子组件
 var ChildGenderSelect = React.createClass({

 handleChange: function (e) {
 alert(e.target.value);
 },
 render: function () {
 return <select onChange={this.handleChange}>
 <option value="1">男</option>
 <option value="0">女</option>
 </select>;
 }
 });


 //父组件
 var ParentForm = React.createClass({

 render: function(){
 return <form>
 <ChildGenderSelect > </ChildGenderSelect><br/>
 </form>
 }

 });

 ReactDOM.render(<ParentForm></ParentForm>, document.body); */

//子组件
/*var ChildGenderSelect = React.createClass({

 render: function () {
 return <select onChange={this.props.handleSlectChange}>
 <option value="1">男</option>
 <option value="0">女</option>
 </select>;
 }
 });


 //父组件
 var ParentForm = React.createClass({

 handleChange: function (e) {
 alert(e.target.value);
 },
 render: function(){
 return <form>
 <ChildGenderSelect handleSlectChange={this.handleChange}> </ChildGenderSelect><br/>
 </form>
 }

 });

 ReactDOM.render(<ParentForm></ParentForm>, document.body);*/

//================================================================================
//子组件
var ChildGenderSelect = React.createClass({

    render: function () {
        return <select onChange={this.props.handleSlectChange}>
            <option value="1">男</option>
            <option value="0">女</option>
        </select>;
    }
});


//父组件
var ParentForm = React.createClass({

    getInitialState: function (e) {
        return {gerder: 1};
    },


    handleChange: function (e) {
        //保存到state
        console.log("选择状态 "+e.target.value);
        this.setState({gerder: e.target.value});
    },

    handleSubmit:function (e) {
        //屏蔽表单的默认提交行为
        e.preventDefault();
        //写ajax请求 自己请求网络
        console.log("提交请求网络 性别 = "+this.state.gerder);
    },
    render: function () {
        return <form onSubmit={this.handleSubmit}>
            <ChildGenderSelect handleSlectChange={this.handleChange}> </ChildGenderSelect><br/>
            <button type="submit">提交</button>
        </form>
    }

});

ReactDOM.render(<ParentForm></ParentForm>, document.body);

第二个js

/**
 * Created by liuml on 2017/5/2.
 */
//不可控组件
//案例:点击提交按钮,提交输入框输入的内容(通过Ajax请求提交)
//主要思路:通过ref获取组件

var FormComponet = React.createClass({

    //处理表单提交
    handlerSubmit: function (e) {
        e.preventDefault();
        //ref类似于id,是一个唯一标示 React.findDOMNode
        var text = this.refs.input_name.value;
        alert(text);
    },


    render: function () {

        return <form onSubmit={this.handlerSubmit}>
            <input type="text" ref="input_name" defaultValue="default"/><br/>
            <button type="submit">提交</button>
            <br/>
        </form>
    }
});

// ReactDOM.render(<FormComponet></FormComponet>, document.body);

//可控组件(MVVM data binding)
//主要思路:把数据存储在状态中(通过事件监听,进行数据绑定),需要时,从状态中获取

//问题:多个控件需要多个事件处理函数,如何做到事件处理函数的复用?


var FormComponet2 = React.createClass({

    getInitialState: function () {
        return {text: ''};
    },

    handleChange: function (e) {

        this.setState({text: e.target.value});
    },
    handleSubmit: function (e) {
        e.preventDefault();
        alert(this.state.text);
    },
    render: function () {
        return <form onSubmit={this.handleSubmit}>
            <input type="text" defaultValue="test" onChange={this.handleChange}></input><br/>
            <button onSubmit={this.handleSubmit}>提交</button>

        </form>
    }
});

ReactDOM.render(<FormComponet2></FormComponet2>, document.body);

第三个js

/**
 * Created by liuml on 2017/5/2.
 */
//事件处理函数的复用
//bind返回改变了上下文this后的函数


var FormCompoent = React.createClass({

    getInitialState: function () {
        return {
            username: '',
            gender: 0,
            agree: true
        }
    },

    handleSubmit: function (e) {
        e.preventDefault();
        //alert(this.state);
        console.log(this.state);
    },
    handleChange: function (key, e) {
        //this->FormComponent对象
        //保存到state
        //alert(key);
        //console.log(e.target.value);
        var obj = {};
        obj[key] = e.target.value;
        this.setState(obj);
        console.log(this.state);
    },

    render: function () {
        return <form onSubmit={this.handleSubmit}>
            <label htmlFor="username">输入用户名</label>
            <input id="username" type="text" onChange={this.handleChange.bind(this, 'username')}/><br/>
            <laber htmlFor="gender">请选择性别</laber>
            <select id="gender" onChange={this.handleChange.bind(this, 'gender')}>
                <option value="1">男</option>
                <option value="0">女</option>
            </select><br/>
            <laber htmlFor="agree">是否同意:</laber>
            <input id="agree" type="checkbox" onChange={this.handleChange.bind(this, 'agree')}/><br/>
            <button type="submit">提交</button>
        </form>
    }
});

ReactDOM.render(<FormCompoent></FormCompoent>, document.body);

第四个js

/**
 * Created by liuml on 2017/5/2.
 */
//事件处理函数的复用
//指定属性,比如说name属性区分不同的组件

var FormCompoent = React.createClass({

    getInitialState: function () {
        return {
            username: '',
            gender: 1,
            agree: true
        }
    },
    handleChange: function (e) {
        //this->FormComponent对象
        //保存到state
        //alert(key);
        //console.log(e.target.value);
        var obj = {};
        obj[e.target.name] = e.target.value;
        this.setState(obj);
        // console.log(this.state);
    },
    handleSubmit: function (e) {
        e.preventDefault();
        //alert(this.state);
        console.log(this.state);
    },


    render: function () {
        return <form onSubmit={this.handleSubmit}>
            <label htmlFor="username">输入用户名</label>
            <input id="username"  name="username" type="text" onChange={this.handleChange}/><br/>
            <laber htmlFor="gender">请选择性别</laber>
            <select id="gender" name="gender" onChange={this.handleChange}>
                <option value="1">男</option>
                <option value="0">女</option>
            </select><br/>
            <laber htmlFor="agree">是否同意:</laber>
            <input id="agree" name="agree" type="checkbox" onChange={this.handleChange}/><br/>
            <button type="submit">提交</button>
        </form>
    }
});

ReactDOM.render(<FormCompoent></FormCompoent>, document.body);

第五个js

/**
 * Created by liuml on 2017/5/2.
 */
//动画
//主要思路:
//不断改变状态,影响style

//流程
//timer->transformComponnent->setState->render->marginLeft

var MyCompoent = React.createClass({

    getDefaultProps: function () {
        return {
            position: 100,//marginleft目标值,组件实现可配置
            time: 10
        }
    },

    getInitialState: function () {
        return {position: 0};//marginLeft 距离左边距初始值
    },
    render: function () {
        var style = {
            color: 'red',
            marginLeft: this.state.position//左外边距
        }
        console.log("render : "+this.state.position);
        return <div style={style}>this animation </div>;
    },
    //动画函数,不断改变state的position属性
    transformCompoent: function () {
        if (this.state.position < this.props.position) {
            this.setState({
                position: ++this.state.position
            })
        } else {
            //动画完成,取消定时器
            clearInterval(this.timer);

        }
        console.log("transformComponnent "+this.state.position);
    },
    //渲染完成调用计时器
    componentDidMount: function () {
        //开启定时器
        this.timer = setInterval(this.transformCompoent, this.props.time);
    }


});

ReactDOM.render(<MyCompoent></MyCompoent>,document.body);


展开阅读全文

没有更多推荐了,返回首页