首页 > 代码库 > react.js 各种小测试笔记
react.js 各种小测试笔记
首先看一个 基础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="http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/{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 各种小测试笔记