tag is not displaying value in React native

问题描述 投票:2回答:2
export default class App extends Component {    

  state = {
    placeName: '',
    text:[],
  }



  changeName = (value) => {
    this.setState({
      placeName: value
    })
  }



  addText = () => {

    if (this.state.placeName.trim === "") {

      return;

    }

    else {

      this.setState(prevState => {

        return {

          text: prevState.text.concat(prevState.placeName)

        };

      })

    }

  }

  render() {

    const Display = this.state.text.map((placeOutput,i) => {
      <Text key={i}>{placeOutput}</Text>
    })

    return (

      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputText}
            value={this.state.placeName}
            placeholder="Awesome text here"
            onChangeText={this.changeName} />
          <Button title="Send" style={styles.inputButton}
            onPress={this.addText} />
        </View>
       <View>{Display}</View>
      </View>

    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  inputText: {
    borderBottomWidth: 2,
    borderBottomColor: "black",
    width: "70%",
  },

  inputButton: {
    width: "30%",
  },

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

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我有一个TextInput和按钮。当我写的东西,然后按回车键,我想我输入的文字下面显示,但没有被显示出来。我不知道......地图功能无法正常工作???

react-native react-native-android
2个回答
0
投票
 var Display = this.state.text.map((placeOutput,i) => {
return (
      <Text key={i}>{placeOutput}</Text>)
    })

您使用的回报?


0
投票

你忘了return map方法内的文本组件:

render() {
  const Display = this.state.text.map((placeOutput, i) => {
    return (
      <Text key={i}>{placeOutput}</Text>
    )
  })

  ...
}
© www.soinside.com 2019 - 2024. All rights reserved.