標籤：
首先看一個 基礎html 至於其中的 js 問價大家去官網下載就好了。
<html><head><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script></head><body><div id="test"></div><script type="text/babel"></script></body></html>
1在input框中輸入值點擊按鈕擷取其中的值在console.log中列印。
var TestRef = React.createClass({ handleClick : function(){ console.log(this.refs.Inputref.value); }, render:function(){ return (<div> <input type="text" ref="Inputref"/> <input type="button" value="TEXT" onClick={this.handleClick}/> </div>); } }); ReactDOM.render( <TestRef/>, document.getElementById(‘test‘) );
2
//2 組建通訊 屬性的用法
/**
*當輸入框的值改變的時候上面hello後面的值也發生改變
*當Test1 組建建立 執行getInitialState（這個方法只運行一次 在建立組建的時候）方法 設定狀態 name 的預設值為空白
*然後執行render 方法 渲染 此時調用Test組建 由於組建Test中name 屬性的值是空 所以頁面第一次會顯示 hello word
* 當使用者在輸入框中輸入資料的時候 出發 onChange 執行handleChange 方法 這個方法中
*setState 更新name 的狀態為輸入框的值。此時在組建Test 中的屬性name 的值發生改變 所以會隨之變化
*/
var Test =React.createClass({ render:function(){ return <div>hello,{this.props.name ? this.props.name :‘word!‘}!</div>; } }); var Test1 = React.createClass({ getInitialState:function(){ return {name:‘‘}; }, handleChange:function(event){ this.setState({name:event.target.value}) }, render:function(){ return( <div> <Test name={this.state.name}/> <input type="text" onChange={this.handleChange}/> </div> ); } }); ReactDOM.render( <Test1/>, document.getElementById(‘test‘) );
3
// 組建通訊 狀態 屬性的用法
/**
* 狀態，屬性的用法
* 情境：點擊提交的時候 擷取textarea的值和select 選中的值。用console.log 列印出來
* 最後render 渲染的時候是Test1組建 所以先看Test1組建 建立的時候 定義了2個狀態 names數組 selectvalue
* 渲染的時候 也載入了<Test>組建 給組建設定了一個屬性selectName 值等於Test1中的狀態 selectvalue
* 組建Test1中當下拉框的值改變的時候觸發handleOnchange方法 設定狀態 selectvalue的值為下拉框中選中的值。
*在Test 組建中 建立的時候 設定狀態 inputValue為空白 渲染的時候 當輸入框的值改變的時候出發handleONE方法
*設定狀態inputValue 的值為輸入框的值。 當點擊Submit的時候出發 handleTWO 方法 擷取狀態inputValue的值和屬性selectName的值
*
var Test =React.createClass({ getInitialState:function(){ return {inputValue:‘‘}; }, handleONE:function(event){ this.setState({inputValue:event.target.value}); }, handleTWO:function(){ console.log("textarea value is:"+this.state.inputValue+"----selectValue:"+this.props.selectName); }, render:function(){ return ( <div> <textarea placeholder="please input string" onChange={this.handleONE}> </textarea> <input type="button" value="Submit" onClick={this.handleTWO}/> </div> ); } }); var Test1 = React.createClass({ getInitialState:function(){ return{ names:[‘xiaoming‘,‘xiaowang‘,‘xiaohong‘], selectvalue:‘‘, } }, handleOnchange:function(event){ this.setState({selectvalue:event.target.value}); }, render:function(){ var optionArr = []; for (var option in this.state.names) { optionArr.push(<option key={option} value={this.state.names[option]}>{this.state.names[option]}</option>); }; return( <div> <select onChange={this.handleOnchange}> {optionArr} </select> <Test selectName={this.state.selectvalue}/> </div> ); } }); ReactDOM.render( <Test1/>,document.getElementById(‘test‘) );
*/
react.js 各種小測試筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
