• 浅谈React实现输入框

    2017-05-03 16:25:22
    var data = { label: "Name", placeholder: "Please enter your name!", clearImg: "clear.png", regExp: /^\w{6,20}$/ ...var InputBox = React.createClass({ getInitialState: function() { return {input

    组件要实现的功能:

    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')
    );
    展开全文
  • 按照官方文档和例程博客,实现了一个简单的输入框组件。 如果想了解官方案例,请参考深入理解 React 总结一下,一个简单的React.js应用应按照以下步骤构建: 设计组件原型和JSON API; 拆分用户界面为一个组件树...

    React组件化开发初试

    按照官方文档和例程博客,实现了一个简单的输入框组件。

    如果想了解官方案例,请参考深入理解 React

    总结一下,一个简单的React.js应用应按照以下步骤构建:

    1. 设计组件原型和JSON API;
    2. 拆分用户界面为一个组件树;
    3. 利用React, 创建应用的一个静态版本;
    4. 识别出最小的(但是完整的)代表UI的state;
    5. 确认state的生命周期;
    6. 添加反向数据流。

    个人认为这里的难点在于如何拆分用户界面,粒度过大不利于组件化的重用,粒度过小的话,显得冗余过多,并且复杂度陡升。本人最开始尝试细化的拆分,尽量让一个组件只完成一个很小的功能需求,但最后反而不知道如何给每个组件分配其任务。

    另一个难点来源于对state的判断,其实如果能够识别出最小的state,读者会发现一个复杂的组件所需的state数量其实很少。

    在React.js中,有两种数据模型,state代表的是会动态变化的状态,props代表的是父级传递而来的属性,state会反过来更新UI,而props只是一次性设置填充。

    第一步:构建原型

    我们的组件要完成以下功能:

    1. 可以定制label和输入框的placeholder的内容
    2. 可以有个属性设置个正则,输入的文字不符合正则的时候输入框就标红
    3. 右侧的大叉icon点击后,消失并清楚输入框内容
    4. 组件需要开放3个对外方法,获取(获取值时trim),设置(设置值时trim),删除,输入框的内容。

    原型比较简单,样式如下:
    LimitedInputBox

    JSON接口数据如下:

    { 
    labelText: "酒店地址",
    hinderText: "请填写酒店地址",
    buttonImgSrc:
    regExp: /^\w{5,8}$/
    }

    我们通过JSON数据设置输入框组件的label标签、Input的placeholder属性和对用户输入的正则验证。

    第二步:拆分用户界面为一个组件树

    在完成用户界面切分的过程中,最开始,如图原型图所示,做了非常细粒度的拆分,拆分结构如下:

    • LimitedInputBox
      • Title
      • InputBox
      • ClearButton

    这里,将LimitedInputBox作为最外面的容器,包裹整个组件,子组件分为三部分,Title即是一个label标签,用来显示该输入框组件的名称(或者说标题),InputBox即是一个input标签,用来接收用户输入,ClearButton可以用一个img标签,用来清除input输入框内容。刚开始准备用另外一个容器包裹InputBoxClearButton,发现这样过于冗余于是两者还是和Title作为同一级组件比较好。

    后来思来,觉得过于拆分了,最小单位与HTML原生标签同一级别,没有意义,因此,最后只保留了一个组件,就称之为LimitedInputBox。即:

    • LimitedInputBox

    第三步:利用React, 创建应用的一个静态版本

    首先,不需要考虑用户交互,直接将数据模型渲染到UI上。即将数据渲染和用户交互两个过程拆分开来。

    这样做比较简单,因为构建静态版本的页面只需要大量的输入,而不需要思考;但是添加交互功能却需要大量的思考和少量的输入。

    为了创建一个渲染数据模型的应用的静态版本,你将会构造一些组件,这些组件重用其它组件,并且通过 props 传递数据。 props 是一种从父级向子级传递数据的方式。

    本例中,的props就是第一步构建的JSON数据。

    考虑到第二步中我采取了两种拆分方式,这里给出相应的代码:

    /** author : River He**/
    
    //细分结构
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        buttonImgSrc: "eliminate.png",
        regExp: /^\w{5,8}$/
    };
    
    var Title = React.creatClass({
        render: function() {
        return (
            <label>{this.props.labelText}</label>
        );
      }
    });
    
    var InputBox = React.createClass({
        render: function() {
      return (
        <input 
            placeholder={this.props.hinderText} 
            regExp={this.props.regExp}>
        </input>
      );
      }
    });
    
    var ClearButton = React.createClass({
        render: function() {
        return (
            <img src={this.props.buttonImgSrc}></>
        );
      }
    });
    
    var LimitedInputBox = React.createClass({
        render: function() {
        return (
            <Title labelText={this.props.data.labelText} />
          <InputBox 
            hinderText={this.props.data.hinderText}
            regExp={this.props.data.regExp}
          />
          <ClearButton buttonImgSrc={this.props.data.buttonImgSrc} />
        );
      }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
      document.getElementById('example')
    );
    /** author : river he**/
    
    //粗划分
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        buttonImgSrc: "eliminate.png",
        regExp: /^\w{5,8}$/
    };
    
    var LimitedInputBox = React.createClass({
        render: function() {
    
            return (
                <div>
                <label >{this.props.data.labelText}</label>
                <input 
                    placeholder={this.props.data.hinderText} 
                    regExp={this.props.data.regExp}>
                </input>
                <img src={this.props.buttonImgSrc ></img>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
        document.getElementById('example')
    );

    第四步:识别出最小的代表UI的state

    为了使 UI 可交互,需要能够触发底层数据模型的变化。 React 通过 state 使这变得简单。

    为了正确构建应用,首先需要考虑应用需要的最小的可变 state 数据模型集合。此处关键点在于精简:不要存储重复的数据。构造出绝对最小的满足应用需要的最小 state 是有必要的,并且计算出其它强烈需要的东西。

    本案例较简单,state很明显是inputText,即input输入框中的值。

    而对于一般情况,可以简单地对每一项数据提出三个问题:

    1. 是否是从父级通过props传入的?如果是,可能不是state。
    2. 是否会随着时间改变?如果不是,可能不是state。
    3. 能够根据组件中其他的state数据或者props计算出来吗?如果是,就不是state。

    第五步:确认state的生命周期

    找出了state之后,需要继续找出那些组件会被state更新,即哪些组件应该拥有state数据模型,本案例同样很简单,因为输入框input要判断用户输入是否符合正则表达式要求,因此与input相关的组件都应该拥有state。按照第一种细分,InputBox组件应该拥有state,按照第二个细分,因为只存在一个组件LimitedInputBox,故其应该拥有state

    //细分结构
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        buttonImgSrc: "eliminate.png",
        regExp: /^\w{5,8}$/
    };
    
    var Title = React.creatClass({
        render: function() {
        return (
            <label>{this.props.labelText}</label>
        );
      }
    });
    
    var InputBox = React.createClass({
        render: function() {
      return (
        <input 
            placeholder={this.props.hinderText}
            value={this.props.inputText} 
            regExp={this.props.regExp}>
        </input>
      );
      }
    });
    
    var ClearButton = React.createClass({
        render: function() {
        return (
            <img src={this.props.buttonImgSrc}></>
        );
      }
    });
    
    var LimitedInputBox = React.createClass({
      getInitialState: function() {
        return {
          inputText: ''
        };
      },
    
      render: function() {
        return (
            <Title labelText={this.props.data.labelText} />
          <InputBox 
            hinderText={this.props.data.hinderText}
            inputText={this.state.inputText}
            regExp={this.props.data.regExp}
          />
          <ClearButton buttonImgSrc={this.props.data.buttonImgSrc} />
        );
      }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
      document.getElementById('example')
    );
    /** author : river he**/
    
    //粗划分
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        buttonImgSrc: "eliminate.png",
        regExp: /^\w{5,8}$/
    };
    
    var LimitedInputBox = React.createClass({
    
        //初始化state
        getInitialState: function() {
            return {
                inputText: ''
            };
        },
    
        render: function() {
    
            return (
                <div>
                <label >{this.props.data.labelText}</label>
                <input 
                    placeholder={this.props.data.hinderText}
                    regExp={this.props.data.regExp}
                    value={this.state.inputText}
                    ></input>
                <img 
                    src={this.props.data.buttonImgSrc}
                </img>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
        document.getElementById('example')
    );

    第六步:添加反向数据流

    前面构建了渲染正确的基于propsstate的沿着组件树从上至下单项数据流动的应用。然后我们需要构建反向的数据流动方式:组件树中层级很深的表单组件更新父级中的state

    如果尝试在前面的输入框中输入,React会忽略你的输入。这是有意的,因为已经设置了inputvalue属性,使其总是和LimitedInputBox(对于粗分的情况,就是其本身)传递过来的state一致。

    但是我们希望的是,无论用户何时改变了表单,都要更新state来反应用户的输入。由于组件只能更新自己的stateLimitedInputBox将会传递一个回调函数给InputBox,此函数将会在state应该被改变时触发。我们可以使用inputonChange事件来监听用户输入,从而确定何时触发回调函数。

    LimitedInputBox传递的回调函数将会调用setState(),然后应用将会被更新。

    /**author : River He*/
    
    //细分结构
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        buttonImgSrc: "eliminate.png",
        regExp: /^\w{5,8}$/
    };
    
    var Title = React.createClass({
        render: function() {
            return (
                <label>{this.props.labelText}</label>
            );
        }
    });
    
    var InputBox = React.createClass({
    
        handleChange: function() {
            this.props.onUserInput(
                this.refs.inputBox.value
            );
        },
    
        fitRegExp: function(inputText) {
            if(inputText.match(this.props.regExp) != null) {
                // console.log("true");
                return true;
            } else {
                // console.log("false");
                return false;
            }
        },
    
        render: function() {
            return (
                <input
                    style={this.fitRegExp(this.props.inputText)?({border: '1px solid green'}):({border: '1px solid red'})} 
                    placeholder={this.props.hinderText}
                    value={this.props.inputText} 
                    regExp={this.props.regExp}
                    ref="inputBox"
                    onChange={this.handleChange}>
                </input>
            );
        }
    });
    
    var ClearButton = React.createClass({
    
        handleClick: function() {
            this.props.onClear();
        },
    
        render: function() {
            return (
                <img 
                    src={this.props.buttonImgSrc} 
                    onClick={this.handleClick}
                />
            );
        }
    });
    
    var LimitedInputBox = React.createClass({
        getInitialState: function() {
            return {
              inputText: ''
            };
        },
    
        handleUserInput: function(inputText) {
            this.setState({
                inputText: inputText
            });
        },
    
        handleClear: function() {
            this.delText();
        },
    
        getText: function() {
            return this.state.inputText;
        },
    
        setText: function(text) {
            this.setState({
                inputText: text
            });
        },
    
        delText: function() {
            this.setState({
                inputText: ''
            });
        },
    
        render: function() {
            return (
                <div>
                    <Title labelText={this.props.data.labelText} />
                    <InputBox 
                        hinderText={this.props.data.hinderText}
                        inputText={this.state.inputText}
                        regExp={this.props.data.regExp}
                        onUserInput={this.handleUserInput}
                    />
                    <ClearButton 
                        buttonImgSrc={this.props.data.buttonImgSrc} 
                        onClear={this.handleClear}
                    />
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
      document.getElementById('example')
    );
    /** author : river he**/
    
    //粗分结构
    var data = {
        labelText: "酒店地址",
        hinderText: "请填写酒店地址",
        regExp: /^\w{5,8}$/
    };
    
    var LimitedInputBox = React.createClass({
    
        //初始化state
        getInitialState: function() {
            return {
                inputText: ''
            };
        },
    
        // handleKeyUp: function(inputText) {
        //  this.setState({
        //      inputText: this.refs.input.value.trim()
        //  });
        // },
        //处理输入框变化
        handleChange: function() {
            this.setState({
                inputText: this.refs.input.value.trim()
            });
        },
    
        //处理删除事件
        handleClear: function() {
            this.delText();
        },
    
        //删除方法
        delText: function() {
            // console.log(this.refs.input.text);
            this.setState({
                inputText: ''
            });
        },
    
        //获取用户输入
        getText: function() {
            return this.state.inputText;
        },
    
        //设置输入框内容
        setText: function(text) {
            this.setState({
                inputText: text.trim()
            });
        },
    
        //判断输入内容否符合设置的正则表达式
        fitRegExp: function(inputText) {
            // console.log("start fitRegExp");
            if(inputText.match(this.props.data.regExp) != null) {
                // console.log("true");
                return true;
            } else {
                // console.log("false");
                return false;
            }
        },
    
        render: function() {
    
            return (
                <div>
                <label >{this.props.data.labelText}</label>
                <input 
                    style={this.fitRegExp(this.state.inputText)?
                    ({border: '1px solid green'}):({border: '1px solid red'})} 
                    placeholder={this.props.data.hinderText} 
                    regExp={this.props.data.regExp}
                    // onKeyUp={this.handleKeyUp}
                    onChange={this.handleChange}
                    value={this.state.inputText}
                    ref='input'
                    ></input>
                <img src="eliminate.png" onClick={this.handleClear}></img>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <LimitedInputBox data={data} />,
        document.getElementById('example')
    );

    以上就是一个简单的输入框组件,相应的html模板和css如下,没有什么样式,希望读者谅解,有时间改下css。

    <!-- limitedInputBox.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
        <!-- <script type="text/babel" src="limitedInputBox.js"></script> -->
        <script src="inputWidget.js" type="text/babel"></script>
        <link rel="stylesheet" href="limitedInputBox.css">
        <title>LimitedInputBox</title>
    </head>
    <body>
        <div id="example"></div>
    </body>
    </html>
    //limitedInputBox.css
    img {
        height: 14px;
        width: 14px;
    }

    JS Bin on jsbin.com

    展开全文
  • react获取输入框的值: 需要用到数据的双向绑定,Vue有v-module,react就需要使用event.target来更新react的状态, 1.初始化:this.state={“username”:""} 2.给输入框加入onchange事件 {this.state.username...

    react获取输入框的值:
    需要用到数据的双向绑定,Vue有v-module,react就需要使用event.target来更新react的状态,
    1.初始化:this.state={“username”:""}
    2.给输入框加入onchange事件

    {this.state.username}

    3.编写事件代码 handleChange = (event) => { this.setState({ username: event.target.value }) } 获取值this.state.username

    获取多个输入框的值
    this.state={
    form: {
    ipt1: ‘’,
    ipt2: ‘’,
    ipt3: ‘’,
    ipt4: ‘’
    },
    }
    2.给输入框绑定事件
    <input type=“text” onChange={this.handleChange.bind(this, ‘ipt1’)}/>
    <input type=“text” onChange={this.handleChange.bind(this, ‘ipt2’)}/>
    <input type=“text” onChange={this.handleChange.bind(this, ‘ipt3’)}/>
    <input type=“text” onChange={this.handleChange.bind(this, ‘ipt4’)}/>
    3.编写change遍历事件:
    handleChange = (key, event) => {
    let form = this.state.form
    for (let item in this.state.form) {
    if (item === key) {
    form[item] = event.target.value
    this.setState({form: form})
    }
    }
    }
    获取this.state.form.ipt1
    this.state.form.ipt2
    this.state.form.ipt3
    this.state.form.ipt4

    展开全文
  • React 实现简单的 输入框与state 的单向数据绑定 目录 流程解析 代码概览 流程解析 0. 创建一个React项目 如果这一步不会的话,可以参考我的前两篇博客 [webpack]搭建一个基本的webpack4.x项目(保姆级教程) [React...

    React 实现简单的 输入框与state 的单向数据绑定

    目录

    • 流程解析
    • 代码概览

    流程解析

    0. 创建一个React项目

    如果这一步不会的话,可以参考我的前两篇博客
    [webpack]搭建一个基本的webpack4.x项目(保姆级教程)
    [React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程

    1. 首先我们创建一个React组件,并将其渲染到页面上
    2. 创建 state ,并在其中将 状态变量 声明好
    class InputData extends React.Component{
    	constructor(){
    		super();
    		this.state = {
    			msg:''
    		}
    	}
    	render(){
    		return <div>
    		</div>
      }
    }
    
    ReactDOM.render(<div>
       <InputData></InputData> 
    </div>,document.querySelector('#app'));
    
    1. 将要用渲染的元素放到组件的render方法里
      (在这里我们要用到一个输入框也就是 input标签 一个普通文字标签用于检验效果)
    2. 为 input 标签绑定 value属性为 this.state 的msg值,并为其绑定一个onChange事件,绑定一个ref属性用于在方法中获取DOM元素内容
    3. 为 p标签 设置元素内容为 this.state.msg 用于验证效果
    render(){
    	return <div>
    		<input type="text" value={this.state.msg} onChange={()=> this.textChanged()} ref="text"/>
    		<p>{this.state.msg}</p>
    	</div>
      }
    
    1. 创建一个组件方法,与刚刚 onChange绑定的(这个方法在每次输入框内容发生改变的时候就会被调用)
    2. 使用 this.setState() 方法将 msg 重新赋值
    class InputData extends React.Component{
    	constructor(){...}
    	render(){...}
    	textChanged(){
    		this.setState({
    			msg:this.refs.text.value
    		})
    	}
    }
    
    1. 现在的p标签已经可以根据 state的改变而改变了,而state的改变也可以改变input标签的内容了

    在这里插入图片描述

    代码概览 index.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class InputData extends React.Component{
    	constructor(){
    		super();
    		this.state = {
    			msg:''
    		}
    	}
    	render(){
    		return <div>
    			<input type="text" value={this.state.msg} onChange={()=> this.textChanged()} ref="text"/>
          <p>{this.state.msg}</p>
    		</div>
      }
      textChanged(){
        this.setState({
          msg:this.refs.text.value
        })
    	}
    }
    
    ReactDOM.render(<div>
       <InputData></InputData> 
    </div>,document.querySelector('#app'));
    

    创作不易 感谢支持 多多点赞

    展开全文
  • React Native智能提示输入框组件:react-native-autocomplete-input,纯JS组件,实现用户在输入后自动提示相似内容,用户可以快捷的选择。 效果图 安装方法 npm install --save react-native-autocomplet...

    本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

    首先祝大家元宵节快乐,今天别忘记吃元宵哦!

    React Native智能提示输入框组件:react-native-autocomplete-input,纯JS组件,实现用户在输入后自动提示相似内容,用户可以快捷的选择。

    效果图

    安装方法

    npm install --save react-native-autocomplete-input

    示例代码

    <View style={styles.container}>
            <Autocomplete
              autoCapitalize="none"
              autoCorrect={false}
              containerStyle={styles.autocompleteContainer}
              data={films.length === 1 && comp(query, films[0].title) ? [] : films}
              defaultValue={query}
              onChangeText={text => this.setState({ query: text })}
              placeholder="输入星球大战电影名称"
              renderItem={({ title, release_date }) => (
                <TouchableOpacity onPress={() => this.setState({ query: title })}>
                  <Text style={styles.itemText}>
                    {title} ({release_date.split('-')[0]})
                  </Text>
                </TouchableOpacity>
              )}
            />
            <View style={styles.descriptionContainer}>
              {films.length > 0 ? (
                Component07.renderFilm(films[0])
              ) : (
                <Text style={styles.infoText}>
                  输入星球大战电影名称
                </Text>
              )}
            </View>
          </View>
    复制代码

    主要参数说明

    • containerStyle 组件所在容器的样式
    • hideResults 当为true时隐藏自动提示
    • data 自动提示数据源(数组)
    • inputContainerStyle input组件所在容器的样式
    • listContainerStyle list组件所在容器的样式
    • listStyle list样式
    • renderItem 设置提示项
    • renderTextInput 自定义Input

    完整示例

    完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例 本次示例代码在 Component07文件夹中。请不要吝啬你们的Star

    组件地址

    GitHub - l-urence/react-native-autocomplete-input: Pure javascript autocomplete input for react-native

    微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。

    举手之劳关注我的微信公众号:ReactNative开发圈

    展开全文
  • 由于近期工作实在太忙,正在赶项目,抽不出时间整理平时遇到的坑,隔了很长时候没有给大家更新文章了,这次正好利用这单休的时间写一篇开发时遇到的坑。大家如果有什么好的建议和意见欢迎投递哦,邮箱:lcczmy@163...
  • 很多情况下,我们需要在界面中进行输入信息,...这里面有一个非常简单的方法来实现: import { KeyboardAwareScrollView } from ‘react-native-keyboard-aware-scrollview’; 然后将整个页面这个组件套起来,<Ke
  • Reactnative,仿支付宝密码输入框
  • 目标:双向绑定多个输入框 import React, { Component } from "react"; class Test extends Component { constructor() { super(); this.state = { List: [ { text: "公司", value: ...
  • 本次使用了RxJS和react开发了一个mac地址输入框,主要实现的功能有限制输入符合条件的字符1-9,a-f,并每隔两位可以自动添加用于分割的冒号。项目屏蔽了react的事件处理,同时使用setSelectionRange来手动控制光标。...
  • react中实现删除输入框中的内容 import React,{Component} from 'react' class Clear extends Component{ constructor(props){ super(props) this.state={ data:'' } } updateState=(e)=>{ this....
  • title: react-native自定义文本输入框 date: 2018-06-17 20:45:31 tags:react-native ...react-native-custom-input,一个自定义的输入组件 The final rendering Installation: ...
  • let obj = {} result.forEach(item =>{ obj[item.eleId] = item }) setFieldsValue(obj) 转载于:https://www.cnblogs.com/shiyunfront/p/9294281.html
  • 实现 Input 输入框
  • 遇到这样一个需求,在一个表单中实现一个带选择功能的输入框,既能输入又能选择。 开始 经过一番思考,有了一个初步的思路:使用Antd的下拉菜单和Input去做,页面加载的时候就去请求数据,然后在Input得到焦点的时候...
  • 使用ref 选中外层的ScrollView标签 二、在componentDidMount方法中对键盘进行监听 // 监听键盘 this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardDidShow); this....
  • 今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右; 然后 然后找了一些方案...
  • react 获取input 输入框的值 第种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ ...
  • React-Native 验证码输入框(TextInput) 测试: import React, {Component} from 'react'; import {Button, StyleSheet, Text, TextInput, View} from 'react-native'; import PropTypes from 'prop-types'; export ...
  • 其实这问题很简单,利用ScrollView和KeyboardAvoidingView即可完成并且点击空白处光标自动消失,顺便记录了下多行文本输入框实现。 <ScrollView contentInsetAdjustmentBehavior="automatic"> <...
1 2 3 4 5 ... 20
收藏数 7,499
精华内容 2,999