react.js 各种小测试笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="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‘)
    );

// 组建通讯 状态 属性的用法
/**
* 状态,属性的用法
* 场景:点击提交的时候 获取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 各种小测试笔记的主要内容,如果未能解决你的问题,请参考以下文章

React Js 中的 Zoho 实时聊天小部件

;~ 小部分AutoHotkey源代码片段测试模板2019年10月9日.ahk

React Js API 调用 Jest 测试用例?

有趣的网页小部件笔记

react.js 学习笔记

React.js学习笔记之事件系统