程序博客网 > 淘宝时不显示菜鸟驿站

React Form详解

来源：互联网 发布：淘宝时不显示菜鸟驿站 编辑：程序博客网 时间：2024/05/16 08:09

一、不可控组件和可控组件
不可控组件：<input type="text" defaultValue="HelloWorld"/>数据写死。
可控组件：<input type="text" defaultValue={this.state.value}/>
为什么组件要可控：
符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理

不可控组件代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    /*var MyForm = React.createClass({
        render:function () {
            return <input type="text" defaultValue="HelloWorld!"/>
        }
    });*/
    var MyForm = React.createClass({
        submitHandler:function (event) {
            event.preventDefault();
            var HelloTo = React.findDOMNode(this.refs.helloTo).value;alert(HelloTo);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <input type="text" ref="helloTo" defaultValue="Hello World"/><br/>
                <button type="submit">Speak</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

可控组件代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                helloTo:"helloworld"
            };
        },
        handleChange:function () {
            this.setState({
                helloTo:event.target.value
            });
        },
        submitHandler:function (event) {
            event.preventDefault();
            alert(this.state.helloTo);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.helloTo} onChange={this.handleChange}/><br/>
                <button type="submit">Speak</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

二、不同表单元素的使用
<label htmlFor="name">Name</label>
<input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange}/>
<textarea value={this.state.helloTo} onChange={this.handleChange}/>
<select value={this.state.helloTo} onChange={this.handleChange}> <option value="one">1</option></select>
实例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleUsernameChange:function () {
            this.setState({
                username:event.target.value
            });
        },
        handleGenderChange:function (event) {
            this.setState({
                gender:event.target.value
            });
        },
        handleCheckboxChange:function (event) {
            this.setState({
                checked:event.target.checked
            });
        },
        submitHandler:function () {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange}/><br/>
                <select value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

三、事件处理函数复用
onChange={this.handleChange1}
onChange={this.handleChange2}
onChange={this.handleChange3}
onChange={this.handleChange4}
...
最好的处理方式是：处理成一个onChange={this.handleChange}
(1)bind复用
handleChange:function(name, event){
    ...
}
{this.handleChange.bind(this,'input1')}
实例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleChange:function (name,event) {
          var newState = {};
          newState[name] = name == "checked"?event.target.checked:event.target.value;
          this.setState(newState);
        },
        submitHandler:function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this,"username")}/><br/>
                <select value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this,"checkbox")}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

(2)name复用
handleChange:function(event){
    var name = event.target.name
}
{this.handleChange}
实例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleChange:function (event) {
          var newState = {};
          newState[event.target.name] = event.target.name == "checked"?event.target.checked:event.target.value;
          this.setState(newState);
        },
        submitHandler:function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange}/><br/>
                <select name="gender" value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input name="checked" id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

四、表单组件自定义
为什么要自定义表单组件：
内因：本身具有特殊性：样式统一、信息内聚、行为固定
外因：本质上是组件嵌套

不可控的自定义组件：
代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Radio = React.createClass({
        getInitialState: function () {
            return {
                value: this.props.defaultValue
            };
        },
        handleChange: function (event) {
            if (this.props.onChange) {
                this.props.onChange(event);
            }
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
            var children = {};
            var value = this.props.value || this.state.value;
            React.Children.forEach(this.props.children, function (child, i) {
                var label = <label>
                    <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                    {child.props.children}
                    <br/>
                </label>;
                children['label' + i] = label;
            }.bind(this));
            return <span>{children}</span>;
        }
    });
    var MyForm = React.createClass({
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.refs.radio.state.value);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio ref="radio" name="my_radio" defaultValue="B">
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>


可控组件，示例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Radio = React.createClass({
        getInitialState: function () {
            return {
                value: this.props.defaultValue
            };
        },
        handleChange: function (event) {
            if (this.props.onChange) {
                this.props.onChange(event); }
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
            var children = {};
            var value = this.props.value || this.state.value;
            React.Children.forEach(this.props.children, function (child, i) {
                var label = <label>
                    <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                    {child.props.children}
                    <br/>
                </label>;
                children['label' + i] = label;
            }.bind(this));
            return <span>{children}</span>;
        }
    });
    var MyForm = React.createClass({
        getInitialState: function () {
            return {my_radio: "B"};
        },
        handleChange: function (event) {
            this.setState({
                my_radio: event.target.value
            });
        },
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.state.my_radio);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>

0 0
淘宝时不显示菜鸟驿站 淘宝时不显示菜鸟驿站
原创粉丝点击
热门IT博客
一叶而知一叶而知
矩阵线阵音响矩阵线阵音响
产品研发流程 知乎
燃油添加剂有用吗 知乎
win10网络连接受限
软件成熟度模型二手
少儿编程入门先学什么
淘宝买家封号规则2017
sql server 2005登陆
mysql group by having
echarts map.js使用
mac系统可以玩什么游戏
php程序员面试宝典
windows平板刷机
编程求1到100的和
windows msdn 下载
玩具机械战警如何编程
淘宝店铺平台收费标准
逍遥游软件
潍坊网络招聘
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 油桶起重钳 液压冷压钳 小斜口钳 高压钳型表 opt压线钳 防爆钳形表 钳子 钳制 钻床平口钳 十字平口钳 机用平口钳 平口钳规格 迷你斜口钳 封口钳 精密平口钳 斜口钳6寸 世达斜口钳价格 斜口钳哪个牌子好 气动平口钳 斜口钳规格 钳子图片 钳子的拼音 钳子拼音 管钳子 钳子的种类 老虎钳子 网线钳子 钳子的价格 台钳子价格 核桃钳子 克丝钳子 液压钳子 卡簧钳子 拔牙钳子 电缆钳子 铅封钳子 进口钳子 鲤鱼钳子 多功能钳子 小钳子 拨线钳子

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里