Question

用户生成的个人资料可供选择。

个人资料如下：

{
    currency: 'CZK',
    name: "Profil 2",
    items: ["5000","700"]
}

基于项目中项目的数量，该应用程序生成文本输入（在这种情况下为两个文本输入）我需要在两个TextInput中预填充值（在这种情况下为5000和700），并允许用户编辑文本输入。

我的TextInput（在地图函数中生成）

<TextInput key={index+1}
    style={styles.customInput}                                
    onChangeText={(text) => this.updateState(index, text)}
    value={this.state.text}
/>

updateState函数

updateState = (index,value) => {
    const text = [this.state.text];
    text[index] = value;
    this.setState({ text: text });
}

当我使用value = {this.state.text}->空白时，用户可以编辑文本

当我使用item（value = {item}）（包含我需要预填充的字符串的变量）->它已预填充，但用户无法编辑（因为它始终将输入值设置为字符串）

Answer 1

您没有正确设置文本输入的状态值

尝试一下

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';

export default class App extends React.Component {

  state = {
    currency: 'CZK',
    name: "Profil 2",
    items: ["5000","700"]
  }

  updateState = (index,value) => {
    const items = this.state.items;
    items[index] = value;
    this.setState({ items });

 }  

  render() {
    const {items} = this.state;
    return (
      <View style={styles.container}>
        {items.map((item,index) => <TextInput style={styles.textInput} value={item} onChangeText={(text) => this.updateState(index, text)} />)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 20,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  textInput:{padding:20,borderColor:"red",borderWidth:1}
});

小吃链接：https://snack.expo.io/@mehran.khan/multipletextinputs

React Native-动态（生成的）TextInputs中的预填充值

1 个答案: