Question

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和按钮。当我写东西并按Enter键时，我希望输入的文字显示在下面，但什么都没有显示。我不知道...地图功能无法正常工作？

Answer 1

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

您正在使用退货吗？

Answer 2

您忘记了return方法中的map文本组件：

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

  ...
}

<text>标签在React native中不显示值

2 个答案: