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

React 前端之家
前端之家收集整理的这篇文章主要介绍了从零开始 React Native (5) 数据传递_表单_函数复用_动画，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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,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);
    },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);
原文链接：https://www.f2er.com/react/304098.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作