android– 在React Native中按下按钮时,一个接一个地附加TextInput组件

概述我是ReactNative的新手.我使用两个按钮在视图中添加TextInput组件.当我按下Add按钮时,它会将一个TextInput组件推入视图中,当我按AddAgain按钮时,它会将另一个TextInput组件推送到前一个下面.但是当我再次按下Add按钮时,它会将TextInput组件推送到第一个下面.但是我想把它推到

我是React Native的新手.

我使用两个按钮在视图中添加Textinput组件.
当我按下Add按钮时,它会将一个Textinput组件推入视图中,当我按Add Again按钮时,它会将另一个Textinput组件推送到前一个下面.

但是当我再次按下Add按钮时,它会将Textinput组件推送到第一个下面.但是我想把它推到最后一个之下.

喜欢：添加|添加|再添一次.

但我需要添加|再次添加|添加等等.

可以做些什么来实现这一目标？
我跟着this.

'use strict';import React, {Component} from 'react';import {  AppRegistry,  StyleSheet,  Text,  VIEw,  touchableHighlight,  Textinput, } from 'react-native';let index = 0 class Test extends Component{constructor(){super();this.state = {  arr: []};}insertSomeThing(){this.state.arr.push(index++)this.setState({ arr: this.state.arr })}render() {let arr = this.state.arr.map((r, i) => {    return (      <VIEw key={ i } style={styles.insertStyle}>        <Textinput placeholder = 'abc' />      </VIEw>      );})let arrAnother = this.state.arr.map((r, i) => {    return (      <VIEw key={ i } style={styles.insertStyle}>        <Textinput placeholder = 'def' />      </VIEw>      );})return (  <VIEw style={styles.container}>  <VIEw>    <touchableHighlight       onPress={ this.insertSomeThing.bind(this) }       style={styles.button}>        <Text>Add</Text>    </touchableHighlight>  </VIEw>  <VIEw>    <touchableHighlight       onPress={ this.insertSomeThing.bind(this) }       style={styles.button}>        <Text>Add Again</Text>    </touchableHighlight>  </VIEw>  { arr }  {arrAnother}  </VIEw>);}}var styles = StyleSheet.create({  container: {flex: 1,margintop: 60,  },   insertStyle: {height:40,alignItems: 'center',justifyContent: 'center',borderBottomcolor: '#ededed',borderBottomWIDth: 1  },  button: {alignItems: 'center',justifyContent: 'center',height:55,backgroundcolor: '#ededed',marginBottom:10  }});AppRegistry.registerComponent('Test', () => Test);

解决方法:

问题是你正在调用insertSomeThing函数,这个函数推送一个新的< Text>在变量arr中,然后按以下顺序呈现：

</VIEw>    { arr }    {arrAnother}</VIEw>

如果要在列表末尾插入不同的TextVIEw,则必须删除{arrAnother}并修改地图功能.您的代码将如下所示：

insertSomeThing( placeholder ){  this.state.arr.push({index:index++, placeholder:placeholder});  this.setState({ arr: this.state.arr });}render() {  let arr = this.state.arr.map((r, i) => {    return (      <VIEw key={ i } style={styles.insertStyle}>        <Textinput placeholder = {r.placeholder} />      </VIEw>    );  });  return (    <VIEw style={styles.container}>      <VIEw>        <touchableHighlight           onPress={ () => this.insertSomeThing('add') }           style={styles.button}>          <Text>Add</Text>        </touchableHighlight>      </VIEw>      <VIEw>        <touchableHighlight           onPress={ () => this.insertSomeThing('addAgain') }           style={styles.button}>             <Text>Add Again</Text>        </touchableHighlight>      </VIEw>      { arr }    </VIEw>  );}

编辑

要处理onChangeText,Textinput将如下所示：

let arr = this.state.arr.map((r, i) => {    var ref = 'textinput'+i;    return (      <VIEw key={ i } style={styles.insertStyle}>        <Textinput ref={ref} onChangeText={(text) => this._onChangeText(text,ref)} />      </VIEw>    );  });

您必须在组件中定义_onChangeText以处理事件.您将收到文本并参考输入.您以后可以使用this.refs [ref]引用输入.

总结

以上是内存溢出为你收集整理的android – 在React Native中按下按钮时,一个接一个地附加TextInput组件全部内容，希望文章能够帮你解决android – 在React Native中按下按钮时,一个接一个地附加TextInput组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。