React Native-渲染输入列表

Question

编辑：谢谢大家，哇，我觉得很愚蠢。

对于一个反应的组件，我正在尝试渲染输入框的列表。例如，下面的代码应渲染三个输入框。我只是想要它，以至于当我在第一个框中键入字母" a"时，屏幕会呈现" a"已键入，就像您的典型输入框Onchangetext（）。

但是，我很难实现此功能 - 我认为我的任何状态实际上都没有被存储。当我在盒子中键入" a"时，屏幕上没有任何内容。

赦免我，如果我错过了明显的东西，我对总体上做出反应和反应是新手。我非常详细地搜索了一个先前回答的问题 - 我看到了有关React的一些问题，但它正在渲染HTML，因此我不确定它是否适用。谢谢！

import React from 'react';
import { View } from 'react-native';
import { Input } from 'react-native-elements';
class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      texts: ['', '', ''],
    };
  }

  renderInputs() {
    return this.state.texts.map((text, i) => {
      return <Input 
        style={styles.input}
        onChangeText={(text) => this.rerenderOnChange(text, i)}
        value={this.state.texts[i]}
        placeholder='Email'
        placeholderTextColor='white'
        autoCapitalize='none'
        inputStyle={styles.inputStyle}
      />
    });
  }
  rerenderOnChange(text, index) {
    texts = []
    for (var i = 0; i < this.state.texts.length; i++) {
      if (i == index) {
        texts.push(text);
      } else {
        texts.push(this.state.texts[i]);
      }
    }
    this.state.texts = texts;
  }
  render() {
    return (
      <View style={styles.view}>
        { this.renderInputs() }
      </View>
    );
  }
}

Answer 1

我进行了一些简单的更改，并且正在工作

喜欢 -

this.state.texts = texts;

to

this.setState({ texts });

和

texts = []

to

const texts = [] 

或

let texts = []

请在下面找到工作示例 - https://snack.expo.io/h18lwdm84

Answer 2

而不是 this.state.texts = texts;

在您的rerenderOnChange()方法中使用this.setState({texts : texts})

请注意：永远不要直接突变this.state，因为之后呼叫setState()可以替换您制作的突变。将this.state视为不变。