时间戳

首页 > 解决方案 > React-Native 输出视图组件的问题

reactjs - React-Native 输出视图组件的问题

问题描述

此代码不显示我使用add _ Button添加到其中的位置的列表（位置）。

这段代码的一般工作是我使用TextInput组件将文本输入到这个 react-native 应用程序中，之后我按下添加按钮将此文本添加到列表（位置）中，之后它会自动显示所有输入的文本。

例如，如果我第一次进入该地点，它只显示该文本，但如果我输入另一个文本，它会显示该文本以及第一个文本。

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

export default class App extends Component
{
  state = {
      placeName: "",
      places: []
  };

  placeNameChangeHandler=(val)=>
  {
    this.setState({
      InputValue: val
    })
  };  

  placeSubmitHandler = () =>{
    if(this.state.placeName.trim() === "")
    {
      return;
    } 
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName)
      };
    });
  };


  render()
  {
    const placesOutput = this.state.places.map((place, i) =>(
      <Text key={i} backgroundColor = 'black' >{place}</Text>
    ));
    return(
      <View style={Styles.container}>
        <View style = {Styles.inputContainer}>
          <TextInput
            placeholder = "Search place?"
            value = {this.setState.placeName}
            onChangeText = {this.placeNameChangeHandler}
            style={Styles.placeInput}
          />
          <Button 
            title='Add' 
            style = {Styles.placeButton} 
            onPress = {this.placeSubmitHandler}
          /> 
        </View>
        <View>{placesOutput}</View> 
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flex:1, 
    padding: 10,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start'
  },

  inputContainer: {
    width: "100%",
    flexDirection : 'row',
    justifyContent: 'space-between',
    alignItems:'center'
  },

  placeInput: {
    width: "70%"
  },
  placeButton: {
    width: "30%"
  }
})

标签： reactjsreact-nativeviewoutputreact-native-android

解决方案

这不是100％正确，但我会写下来。

这似乎是因为setState.

第一的。

更改value = {this.setState.placeName}为value = {this.state.placeName}

     <TextInput
        placeholder = "Search place?"
        value = {this.state.placeName}
        onChangeText = {this.placeNameChangeHandler}
        style={Styles.placeInput}
      />

下一个。

更改 setState 在placeNameChangeHandler

placeNameChangeHandler=(val)=>{
    this.setState({
      placeName: val
    })
};

和

添加初始化placeName

placeSubmitHandler=()=>{
    if(this.state.placeName.trim() === "")
    {
      return;
    } 
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName),
        placeName : ""
      };
    });
  };

对不起我愚蠢的英语。

我希望你明白 ：）

推荐阅读