Question

如何通过单击按钮在React Native中添加文本输入？例如，我按下“+”按钮，它会在视图的底部添加一个文本输入。

EDITED：这是我的代码（删除了所有不相关的东西）。由于某种原因不起作用。单击该按钮不会执行任何操作。

    import React, { Component, PropTypes } from 'react';
    import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button, 
             TouchableHighlight, TouchableOpacity, ScrollView, findNodeHandle, 
             DatePickerIOS} from 'react-native';
    import TextInputState from 'react-native/lib/TextInputState'

    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {textInput: [],
          date: new Date(),
        } 
      }

      addTextInput = (key) => {
        let textInput = this.state.textInput;
        textInput.push(<TextInput key={key} />);
        this.setState({ textInput })
      }

      render(){
        return(
          <View>
            <Button title='+' onPress={() => 
               this.addTextInput(this.state.textInput.length)} />
            {this.state.textInput.map((value, index) => {
              return value
            })}
          </View>
        )
      }
    }

Answer 1

这是一个例子：

import React, { Component } from 'react';
import { AppRegistry, View, Text, Button, TextInput} from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      textInput : []
    }
  }
  addTextInput = (key) => {
    let textInput = this.state.textInput;
    textInput.push(<TextInput key={key} />);
    this.setState({ textInput })
  }
  render(){
    return(
      <View>
        <Button title='+' onPress={() => this.addTextInput(this.state.textInput.length)} />
        {this.state.textInput.map((value, index) => {
          return value
        })}
      </View>
    )
  }
}

也许这可以帮助你：）

Answer 2

我有一个从单个文本输入开始的解决方案。它有一个“添加”按钮，可以在第一个文本输入的正下方添加另一个文本输入。该新输入将保留“添加”按钮，并且上面所有先前的输入都将更改为“删除”按钮，用户当然可以使用该按钮删除相应的视图。我只能通过处理React Redux商店中的状态来使其正常工作，因此代码分散在太多不同的文件中，无法在此处发布，但是任何有兴趣的人都可以在GitHub或Snack上查看它

我知道这是一篇过时的文章，但这是一个问题，我希望在我第一次来这里时得到解答。

如何在React Native中动态添加文本输入

2 个答案: