从零开始 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: @H_502_171@function (e) {
 alert(e.target.value);
 },render: @H_502_171@function () {
 @H_502_171@return <select onChange={this.handleChange}>
 <option value="1">男</option>
 <option value="0">女</option>
 </select>;
 }
 });


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

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

 });

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

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

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


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

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

 });

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

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

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


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

    getInitialState: @H_502_171@function (e) {
        @H_502_171@return {gerder: 1};
    },handleChange: @H_502_171@function (e) {
        //保存到state
        console.log("选择状态 "+e.target.value);
        this.setState({gerder: e.target.value});
    },handleSubmit:@H_502_171@function (e) {
        //屏蔽表单的默认提交行为
        e.preventDefault();
        //写ajax请求 自己请求网络
        console.log("提交请求网络 性别 = "+this.state.gerder);
    },render: @H_502_171@function () {
        @H_502_171@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获取组件

@H_502_171@var FormComponet = React.createClass({

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

        @H_502_171@return <form onSubmit={@H_502_171@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）
//主要思路：把数据存储在状态中（通过事件监听，进行数据绑定），需要时，从状态中获取

//问题：多个控件需要多个事件处理函数，如何做到事件处理函数的复用？


@H_502_171@var FormComponet2 = React.createClass({

    getInitialState: @H_502_171@function () {
        @H_502_171@return {text: ''};
    },handleChange: @H_502_171@function (e) {

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

        </form>
    }
});

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

第三个js

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


@H_502_171@var FormCompoent = React.createClass({

    getInitialState: @H_502_171@function () {
        @H_502_171@return {
            username: '',gender: 0,agree: true
        }
    },handleSubmit: @H_502_171@function (e) {
        e.preventDefault();
        //alert(this.state);
        console.log(@H_502_171@this.state);
    },handleChange: @H_502_171@function (key,e) {
        //this->FormComponent对象
        //保存到state
        //alert(key);
        //console.log(e.target.value);
        @H_502_171@var obj = {};
        obj[key] = e.target.value;
        @H_502_171@this.setState(obj);
        console.log(@H_502_171@this.state);
    },render: @H_502_171@function () {
        @H_502_171@return <form onSubmit={@H_502_171@this.handleSubmit}>
            <label htmlFor="username">输入用户名</label>
            <input id="username" type="text" onChange={@H_502_171@this.handleChange.bind(@H_502_171@this,'username')}/><br/>
            <laber htmlFor="gender">请选择性别</laber>
            <select id="gender" onChange={@H_502_171@this.handleChange.bind(@H_502_171@this,'gender')}>
                <option value="1">男</option>
                <option value="0">女</option>
            </select><br/>
            <laber htmlFor="agree">是否同意:</laber>
            <input id="agree" type="checkBox" onChange={@H_502_171@this.handleChange.bind(@H_502_171@this,'agree')}/><br/>
            <button type="submit">提交</button>
        </form>
    }
});

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

第四个js

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

@H_502_171@var FormCompoent = React.createClass({

    getInitialState: @H_502_171@function () {
        @H_502_171@return {
            username: '',gender: 1,handleChange: @H_502_171@function (e) {
        //this->FormComponent对象
        //保存到state
        //alert(key);
        //console.log(e.target.value);
        @H_502_171@var obj = {};
        obj[e.target.name] = e.target.value;
        @H_502_171@this.setState(obj);
        // console.log(this.state);
    },render: @H_502_171@function () {
        @H_502_171@return <form onSubmit={@H_502_171@this.handleSubmit}>
            <label htmlFor="username">输入用户名</label>
            <input id="username"  name="username" type="text" onChange={@H_502_171@this.handleChange}/><br/>
            <laber htmlFor="gender">请选择性别</laber>
            <select id="gender" name="gender" onChange={@H_502_171@this.handleChange}>
                <option value="1">男</option>
                <option value="0">女</option>
            </select><br/>
            <laber htmlFor="agree">是否同意:</laber>
            <input id="agree" name="agree" type="checkBox" onChange={@H_502_171@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

@H_502_171@var MyCompoent = React.createClass({

    getDefaultProps: @H_502_171@function () {
        @H_502_171@return {
            position: 100,//marginleft目标值,组件实现可配置
            time: 10
        }
    },getInitialState: @H_502_171@function () {
        @H_502_171@return {position: 0};//marginLeft 距离左边距初始值
    },render: @H_502_171@function () {
        @H_502_171@var style = {
            color: 'red',marginLeft: @H_502_171@this.state.position//左外边距
        }
        console.log("render : "+@H_502_171@this.state.position);
        @H_502_171@return <div style={style}>@H_502_171@this animation </div>;
    },//动画函数，不断改变state的position属性
    transformCompoent: @H_502_171@function () {
        @H_502_171@if (@H_502_171@this.state.position < @H_502_171@this.props.position) {
            @H_502_171@this.setState({
                position: ++@H_502_171@this.state.position
            })
        } @H_502_171@else {
            //动画完成，取消定时器
            clearInterval(@H_502_171@this.timer);

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


});

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

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

猜你在找的React相关文章