React表單詳解

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、不可控組件和可控組件不可控組件：<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 typ

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More