Question

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

对于React-Native组件，我正在尝试呈现输入框的列表。例如，下面的代码应呈现三个输入框。我只是希望这样，以便当我在第一个框中键入字母“ A”时，屏幕呈现出已键入“ A”，就像典型的输入框onChangeText（）一样。

但是，我很难使它正常工作-我认为我的任何状态实际上都没有存储。当我在框中键入“ A”时，屏幕上什么都没有显示。

如果我缺少明显的内容，请原谅我，对于React和React-Native来说，我一般是新手。我彻底搜索了一个先前回答的问题-我看到了一些关于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;

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

请注意：：切勿直接突变this.state，因为事后致电setState()可能会取代您所做的突变。将this.state视为不变。

Answer 2

我做了一些简单的更改，就可以了

像-

this.state.texts = texts;

到

this.setState({ texts });

和

texts = []

到

const texts = []

或

let texts = []

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

React Native-呈现输入列表

2 个答案: