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

最新推荐文章于 2023-03-02 16:25:27 发布

六道对穿肠

最新推荐文章于 2023-03-02 16:25:27 发布

阅读量1.3k

点赞数

分类专栏：从零开始React Native React_Native项目

本文链接：https://blog.csdn.net/liudao7994/article/details/71123830

版权

React_Native项目同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

从零开始React Native

14 篇文章 0 订阅

订阅专栏

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

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);

六道对穿肠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始 React Native (5) React 数据传递_表单_函数复用_动画

数据传递表单函数复用_动画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
复制链接

扫一扫