React.js踩坑中...

最新推荐文章于 2023-03-22 10:51:19 发布

啋菇凉的尛蘑菇

最新推荐文章于 2023-03-22 10:51:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/wangyingtong/article/details/52792087

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文介绍React.js的基础用法，包括按钮点击事件处理、数组解析与组件嵌套展示、DOM节点操作及表单提交功能实现，并演示了如何从网络获取数据进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司新项目暂定技术使用React.js,先找几个DEMO试试，其中语法与之前的语法有点点的区别，最坑爹的是没有一个完美的IDE，作为脑子懒得人，没有快捷联想，我的天~~~废话不多说直接上。。。

IDE：Sublime Text 3，更新ReactJS插件，勉强使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="js/react.min.js"></script>
		<script src="js/react-dom.min.js"></script>
		<script src="js/browser.min.js"></script>
		<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
	</head>

	<body>
		<p>-----------------按鈕点击--------------------------------</p>
		<div id="content"></div>
		<p>-----------------数组解析/组件嵌套--------------------------------</p>
		<div id="arraycontent"></div>
		<p>-----------------获取真实的DOM节点--------------------------------</p>
		<div id="getDOM"></div>
		<p>-----------------获取jsx--------------------------------</p>
		<div id="getJSX"></div>
		<p>///----------------------提交表单----------------------------</p>
		<div id="submitForm"></div>
		<script type="text/babel" src="content.js" ></script>
	</body>

</html>

//-----------------按鈕点击--------------------------------
var Clickapp=React.createClass({
	getInitialState:function () {
		// body...
		return { clickCount:0,};
	},
	handleClick:function () {
		// body...
		this.setState({
			clickCount:this.state.clickCount+1,
		});
	},
	render:function () {
		// body...
		return(<div>
				<h2>点击下面按钮</h2>
				<button onClick={this.handleClick}>点击我</button>
				<p>一共点击了:{this.state.clickCount}</p>	
			</div>);
	}
});

ReactDOM.render(<Clickapp /> ,document.getElementById('content')); 

//<p>-----------------数组解析/组件嵌套--------------------------------</p>
 
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
 var ArrayText=React.createClass({
 	rawMarkup: function() {
    		var md = new Remarkable();
    		var rawMarkup = md.render(this.props.comment);
    		return { __html: rawMarkup };
  		},
	  handleAuthorOnClick: function() {
	   	alert(e.target.value);
	  },
 	render() {
 		return (
 			<div>
 				<h1 onClick={this.handleAuthorOnClick}>{this.props.author}</h1>
 				<span dangerouslySetInnerHTML={this.rawMarkup()}></span>
 			</div>
 		);
 	}
 });
var Arraycontent=React.createClass({
 	render() {
 		var ArrayNodes = this.props.data.map(function(comment) {
      		return (<div><ArrayText author={comment.author} comment={comment.text}/></div>);
      		}
      	);
 		return (<div>{ArrayNodes}</div>);
 	}
 });
ReactDOM.render(<Arraycontent data={data} /> ,document.getElementById('arraycontent')); 

///<p>-----------------获取真实的DOM节点--------------------------------</p>

var GetDOM=React.createClass({
	getInitialState:function () {
		// body...
		return {inputText:"未选中",isCheck:false};
	},
	handleClick:function () {
		this.setState({
			isCheck:this.state.isCheck?false:true,
			inputText:!this.state.isCheck?"已选中":"未选中"
		});
	},
	render(){
		return(
				<div>	
					<input type="checkbox" checked={this.state.isCheck}></input>{this.state.inputText}

					<input type="button" value="改变选中状态" onClick={this.handleClick}></input>
				</div>
			);
	}
});
ReactDOM.render(<GetDOM /> ,document.getElementById('getDOM')); 

///----------------------提交表单----------------------------
var Checkbox=React.createClass({
	render(){
		return (<div>
					<input onChange={this.props.handleCheckboxChange}  type="checkbox" value="A">A</input>
					<input onChange={this.props.handleCheckboxChange} type="checkbox" value="B">B</input>
					<input onChange={this.props.handleCheckboxChange} type="checkbox" value="C">C</input>
			</div>)
	}
});
var Radio=React.createClass({
	render(){
		return (<div>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="A">A</input>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" defaultChecked value="B">B</input>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="C">C</input>
				</div>)
	}
});
var SubmitForm=React.createClass({
	getInitialState:function(){
		return {
			textValue:"input value",
			selectValue:"B",
			checkboxValue:[],
			textareaValue:"input same ....",
			radioValue:"C",
		}
	},
	handleRadioChange:function(e){
		this.setState({
			radioValue:e.target.value,
		});
	},
	handleCheckboxChange:function(e){
		var checkboxArr=this.state.checkboxValue.slice();
		var newVal=e.target.value;
		var index=checkboxArr.indexOf(newVal);
		if(index==-1){
			checkboxArr.push(newVal)
		}else{
			checkboxArr.splice(index,1)
		}
		this.setState({
			checkboxValue:checkboxArr,
		});
	},
	handleSubmit:function(e){
		e.preventDefault();
		var formData={
			textValue:this.refs.inputText.getDOMNode().value,
			selectValue:this.refs.inputSelect.getDOMNode().value,
			radioValue:this.state.radioValue,
			checkboxValue:this.state.checkboxValue
		}
		console.log('the form result is:')
		console.log(formData)
		 
	},
	render(){
		return (
			<form onSubmit={this.handleSubmit}>
				文本:<input type="text" ref="inputText" defaultValue={this.state.textValue} />
				<br/>
				<br/>
				选项:<select defaultValue={this.state.selectValue} ref="inputSelect">
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
					<option value="D">D</option>
				</select>
				<br/>
				<br/>
				单选:
				<Radio handleRadioChange={this.handleRadioChange}/>
				<br/>
				多选:
				<Checkbox handleCheckboxChange={this.handleCheckboxChange}/>
				<br/>
				<input type="submit"></input>
			</form>
			);
	}
});
ReactDOM.render(<SubmitForm /> ,document.getElementById('submitForm'));

实现最后一个提交表单的功能时，虽然把值获取出来，但是在给checkBox，radioBox 赋默认值时，不知如何下手，慢慢来~~明日j继续..

///------------------------获取网络数据----------------------------------
var UserGist=React.createClass({
    getInitialState:function(){
        return{
                username: '',
                lastGistUrl: ''
        };
    },
    componentDidMount:function(){
        $.get(this.props.source,function(result){
            var lastGist=result[0];
            if(this.isMounted()){
                this.setState({
                    username:lastGist.owner.login,
                    lastGistUrl:lastGist.html_url
                });
            }
        }.bind(this))
    },
    render:function(){
        return(
            <div>
                 {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
            </div> 
        );
    }
});
//<p>----------获取网络数据2----------</p>  
var RepoList=React.createClass({
    getInitialState:function(){
        return{
            loading: true,
            error: null,
            data: null
        }
    },
    //then()方法是异步执行 就是当.then()前的方法执行完后再执行then()内部的程序 这样就避免了，数据没获取到等的问题
      componentDidMount:function() {
        this.props.promise.then(
          (value) => this.setState({loading: false, data: value}))
      },

    render:function(){
        if (this.state.loading) {
            return <span>Loading...</span>;
        }else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
        }else {
            console.log(data)
            var repos = this.state.data.items;
            var repoList = repos.map(function (repo, index) {
            return (
               <Form> <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li></Form>
                );
            });
            return (
                <main>
                  <h1>Most Popular JavaScript Projects in Github</h1>
                  <ol>{repoList}</ol>
                </main>
              )
        }
    }
});

因为项目UI为weui，故加入

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery'
import {ButtonArea,
    Button,
    Cells,
    CellsTitle,
    CellsTips,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
    Form,
    FormCell,
    Icon,
    Input,
    Label,
    TextArea,
    Switch,
    Radio,
    Checkbox,
    Select,
    Uploader} from 'react-weui';
import Page from '../../component/page';

比较乱...