u013063153
u013063153

React表单详解

一、不可控组件和可控组件
不可控组件：数据写死。
可控组件：
为什么组件要可控：
符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理

不可控组件代码： 
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 
        }
    });*/

    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">Speakbutton>
            form>
        }
    });
    React.render(<MyForm>MyForm>,document.body
    );
script>
body>
html>

可控组件代码： 
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">Speakbutton>
            form>
        }
    });
    React.render(<MyForm>MyForm>,document.body
    );
script>
body>
html>

二、不同表单元素的使用