2019-04-19 09:52:24 qq_43442789 阅读数 586
  • React前端框架/进阶篇

    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    1335 人正在学习 去看看 李强强

react实现仿微信聊天输入框

  • 实现原理:
    • 利用H5提供的元素可编辑属性 contentEditable 使普通的html元素具有和输入框一样的编辑功能
  • 其他实现方式(较复杂):
    • 使用textarea作为输入框
    • 准备一个与textarea等宽的pre元素,用于计算内容高度,需要设置css {word-break:break-all} 否则可能不会自动换行
    • 输入的同时将value写入pre,然后获取pre的scrollHeight,将其赋给textare的height,以此实现textarea随内容自动调整大小
    • emoji输入:由于无法在textarea内直接渲染图片,普遍的做法是使用[-]这种格式的字符代替emoji,在使用富文本时通过正则匹配[-],替换成对应的emoji图片进行渲染
  • 缺陷
    • 需要直接操作dom,不符合MV*主义核心价值观
    • 依赖h5新属性
  • 使用场景
    • 即时通讯
    • 留言、评论
  • git仓库地址:https://github.com/DarthVaderrr/richTextInput.git

打开方式

截图

主要代码

import React, { Component, Fragment } from 'react';
import { Icon } from 'antd';//使用了一个antd的icon,如果你的项目没有使用antd,可以自己写个按钮样式,无须引入
import { OutterContainer, InputOutter, BtnContainer, SendBtn, EmojiTab } from './style' //使用styled-compoents自定义的样式组件,这样做可以避免组件里出现过多css代码
export default class HyperTextInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            textareaH: '8vw',
            hyperText:"",
            showEmojiTab: false,
            emojiList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
        }
    }
    render() {
        return (
            <Fragment>
                <OutterContainer>
                    <InputOutter>
                            {/*用可编辑的div代替textarea承担输入功能:*/}
                            <div className='inputDiv'
                            ref={(inputDiv) => { this.inputDiv = inputDiv }} 
                            contentEditable={true}
                            style={{ height: 'auto' }}
                            onKeyUp={this.divInput.bind(this)}
                            />
                        <BtnContainer>
                            <div style={{display:"flex",justifyContent:"space-around",alignItems:"center",width:"100%"}}>
                            <Icon
                                onClick={this.showEmojiTab.bind(this)}
                                type="smile"
                                style={{ color: this.state.showEmojiTab ? '#1890FF' : '#555', fontSize: "1.2em",outline:"none",display:"flex",justifyContent:"center",alignItems:"center" }}
                            />
                            {
                                this.state.hyperText?
                                <SendBtn onClick={this.sendMsg.bind(this)}>发送</SendBtn>:
                                <SendBtn style={{color:"#999",background:"#ddd"}}>发送</SendBtn>
                            }
                            </div>
                        </BtnContainer>
                    </InputOutter>
                    {/*emoji表情选择栏,默认折叠,点击图标展开*/}
                    <EmojiTab style={{height:this.state.showEmojiTab?"40vw":"0"}}>
                        {this.state.emojiList.map((item, index) => <div key={index}>
                            <img alt="" data-index={index} onClick={this.chooseEmoji.bind(this,item)} src={`/emoji/emoji${item}.svg`} />
                        </div>)}
                    </EmojiTab>
                </OutterContainer>
            </Fragment>
        )
    }
    //控制表情栏展开折叠
    showEmojiTab() {
        this.setState({
            showEmojiTab: !this.state.showEmojiTab
        })
    }
    //选择表情
    chooseEmoji(index){
        this.inputDiv.innerHTML+=`<img src="/emoji/emoji${index}.svg" />`;
        this.divInput.call(this);
    }
    //文本框输入事件:
    divInput() {
        this.setState({
            hyperText:this.inputDiv.innerHTML
        })
    }
    //发送消息事件:
    sendMsg(){
        console.log('即将发送的msg内容:\n',this.state.hyperText)
        this.inputDiv.innerHTML='';
        this.setState({
            hyperText:'',
            showEmojiTab: false
        })
    }
}
2017-04-25 17:20:09 zhouziyu2011 阅读数 4631
  • React前端框架/进阶篇

    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    1335 人正在学习 去看看 李强强

组件要实现的功能:

1、定制label和输入框的placeholder的内容;

2、输入的内容不符合正则表达式要求时,输入框标红,符合时标绿;

3、点击清除按钮后,按钮消失并清除输入框内容;

4、对外开放3个方法:获取、设置、删除输入框的内容(trim)。


inputBox.html:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="inputBox.css">
		<script src="build/react.js"></script>
		<script src="build/react-dom.js"></script>
		<script src="build/browser.min.js"></script>
	</head>
	<body>
		<div id="inputBox"></div>
		<script type="text/babel" src="inputBox.jsx"></script>
	</body>
</html>


inputBox.jsx:

var grades = [
	{team: "Team1", name: "Alice", grade: 80},
	{team: "Team1", name: "Bruce", grade: 90},
	{team: "Team1", name: "Cindy", grade: 50},
	{team: "Team2", name: "David", grade: 40},
	{team: "Team2", name: "Emy", grade: 60},
	{team: "Team2", name: "Fruid", grade: 70}
];
var FilterBox = React.createClass({
	getInitialState: function() {
		return {
			inputText: "",
			showPassingOnly: false
		};
	},
	filter: function(inputText, showPassingOnly) {
		this.setState({
			inputText: inputText,
			showPassingOnly: showPassingOnly
		});
	},
	render: function() {
		return (
			<div>
				<SearchBox onInput={this.filter} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} />
				<GradeList grades={this.props.grades} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} />
			</div> 
		);
	}
});
var SearchBox = React.createClass({
	filter: function() {
		this.props.onInput(
			this.refs.input.value,
			this.refs.checkbox.checked
		);
	},
	render: function() {
		return (
			<form>
				<input id="text" type="text" ref="input" placeholder="Sreaching..." onChange={this.filter} value={this.props.inputText}/><br/>
				<input type="checkbox" ref="checkbox" checked={this.props.showPassingOnly} onChange={this.filter}/>Only show passing grades
			</form>
		);
	}
});
var GradeList = React.createClass({
	render: function() {
		var rows = [];
		var teams = [];
		this.props.grades.forEach(function(grade, index) {
			if (grade.name.toLowerCase().indexOf(this.props.inputText) == -1 || this.props.showPassingOnly && grade.grade < 60)
				return;
			if (teams.indexOf(grade.team) == -1) {
				rows.push(<Team team={grade.team} key={"team" + index}></Team>);
				teams.push(grade.team);
			}
			rows.push(<Grade name={grade.name} grade={grade.grade} key={"grade" + index}></Grade>);
		}.bind(this));
		if (rows.length == 0) 
			rows.push(<tr key={"noMatches"}><td colSpan="2">No matches!</td></tr>);
		return (
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Grade</th>
					</tr>
				</thead>
				<tbody>
					{rows}
				</tbody>
			</table>
		);
	}
});
var Team = React.createClass({
	render: function() {
		return (
			<tr>
				<td colSpan="2">{this.props.team}</td>
			</tr>
		);
	}
});
var Grade = React.createClass({
	render: function() {
		return (
			<tr>
				<td>{this.props.name}</td>
				<td>{this.props.grade}</td>
			</tr>
		);
	}
});
ReactDOM.render(
	<FilterBox grades={grades} />,
	document.getElementById('filterBox')
);

2018-12-10 14:29:09 pcaxb 阅读数 1153
  • React前端框架/进阶篇

    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    1335 人正在学习 去看看 李强强

转载请注明预见才能遇见的博客:http://my.csdn.net/

原文地址:https://blog.csdn.net/pcaxb/article/details/84939301

React Native 解决键盘挡住输入框问题  和 React Native WebView 解决键盘挡住输入框问题

 

1.React Native WebView 解决键盘挡住输入框问题(不需要2)

       if(/Android [4-6]/.test(navigator.appVersion)) {
            window.addEventListener("resize", function() {
                if(document.activeElement.tagName=="INPUT" ||         
                         document.activeElement.tagName=="TEXTAREA") {
                    window.setTimeout(function() {
                        document.activeElement.scrollIntoViewIfNeeded();
                    },0);
                }
            })
        }

2.React Native 解决键盘挡住输入框问题


import {Keyboard,Dimensions} from 'react-native';

//屏幕的高度
let ScreenHeight = Dimensions.get('window').height;

export default class WebViewPageAndroid extends Component {

    constructor(props) {
        super(props);
        this.state = {
            webViewHeight:ScreenHeight,
        }
    }

    componentDidMount(){
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this)); 
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove(); 
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow (e) {
        this.setState({webViewHeight:ScreenHeight - e.endCoordinates.height})
    } 
        
    _keyboardDidHide (e) {
        this.setState({webViewHeight:ScreenHeight})
    }

    render() {
        return (
            <View style={{
                	height:this.state.webViewHeight
				}}>

                <WebView
                style={{
                    height:'100%',
                }}
                />

            </View>
        );
    }
}

说明:React Native WebView的只需要1就能解决,React Native 的组件就用2。

 

React Native 解决键盘挡住输入框问题  和 React Native WebView 解决键盘挡住输入框问题

博客地址:https://blog.csdn.net/pcaxb/article/details/84939301

2018-12-29 10:56:04 Lifestyles_ 阅读数 1444
  • React前端框架/进阶篇

    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    1335 人正在学习 去看看 李强强

                                                               。。

  • 项目中需要做一个类似支付宝输入密码的6个小方格用来接收验证码,后来改成了类似钉钉验证码的下划线输入组件,然后我对这两种情况进行了简单的封装。
  • 目前只实现了简单的功能,1,当组件获取焦点的时候,模拟光标默认在第一个横线或者方框中闪烁,光标会根据输入字符的长度进行移动。2,支持一键粘贴。先把效果图放出来给大家看一下。现在是只能输入数字这一种数据类型。如果后期大家有什么要求需求欢迎提。
  • 输入框的格子大小用的是rem单位,如果大小尺寸不合适,可以审查元素覆盖我的样式。第一次发布组件,有bug请多多包涵。
    npm install react-input-groups;

    import InputGroup from 'react-input-groups';
    import 'react-input-groups/lib/css/styles.css'

    export class Inputarea extends React.Component {
        constructor(props) {
            super(props);
            this.state = {

            };
            this.getValue = this.getValue.bind(this)
        }
        getValue(value) {
            console.log(value)
        }
        render() {
            return (
              <div>
                <InputGroup
                    getValue={this.getValue}
                    length={4}
                    type={'box'}
                />
                {/*length支持4或者6*/}
                <InputGroup
                    getValue={this.getValue}
                    length={4}
                    type={'line'}
                />
              </div>
            );
        }
    }
  

 

2018-12-27 14:19:43 saharalili 阅读数 2840
  • React前端框架/进阶篇

    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    1335 人正在学习 去看看 李强强

react 获取input 输入框的值
第一种方式 非受控组件获取
第二种方式 受控组件获取


非受控组件获取 ref


import React , {Component} from 'react';
export default class App extends Component{
    search(){
        const inpVal = this.input.value;
        console.log(inpVal);
    }

    render(){
        return(
            <div>
                <input type="text" ref={input => this.input = input} defaultValue="Hello"/>
                <button onClick={this.search.bind(this)}></button>
            </div>
        )
    }
}
使用defaultValue表示组件的默认状态,初始会被渲染一次,后续的渲染"Hello"不起作用,会渲染用户输入的内容;input的值由自己改变。(如果将defaultValue属性改为value属性,则input的值永远为“Hello”,用户输入不起作用。)

 

受控组件 this.setState({})


import React , {Component} from 'react';
export default class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            inpValu:''
        }
    }

    handelChange(e){
        this.setState({
            inpValu:e.target.value
        })
    }

    render(){
        return(
            <div>
                <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
            </div>
        )
    }
}

没有更多推荐了,返回首页