Question

这是一个理想的方法论问题。我是新手反应原生，我正在开发一个应用程序，我要求人们输入他们拥有的汽车列表。

当他们到达应用程序屏幕时，他们会看到输入一辆车信息的字段。

但是当他们按下上述输入字段下方的“添加汽车”按钮时，他们应该能够在同一页面上看到另外一组字段来添加有关另一辆汽车的信息。

这样做的理想方式是什么，

我做了以下，

我在渲染功能
之后，我有一个'添加汽车'可触摸的亮点
当点击可触摸的高亮显示时，会调用一个返回的函数，要添加的新字段集（Textinput＆gt;等）

如何添加页面上返回的信息？我应该更新一个在开头是“”的状态变量，它将包含“Textinput等”。以后？

Answer 1

这听起来像是map的理想用例：

updateCar (index, name) {
  let cars = this.state.cars

  // Update the value
  cars[index].name = name

  this.setState({
    cars: cars
  })
}

addCar () {
  let cars = this.state.cars

  // Add the new car
  cars.push({ name: '' })

  this.setState({
    cars: cars
  })
}

render () {
  let me = this

  return (
    <View>
      {this.state.cars.map(function(car, index) {
        return (<TextInput onChangeText={(text) => me.updateCar(index, name)}
                          value={me.state.cars[index].name} />)
      })}
      <TouchableHighlight onPress={this.addCar}>
        <Text>Add Car</Text>
      </TouchableHighlight>
    </View>
  )
}

请记住在this.addCar.bind(this)中使用constructor()表示每种方法。

map()函数允许我们迭代集合并为该集合中的每个项返回一个值。在这里，我们可以获取原始汽车数据，并返回UI元素。

如何在反复原生的按钮按下时在视图中显示额外的组件？

1 个答案: