如何通过按下按钮从函数调用中获取 return 值？

Question

我是 javascript 家族的新手，我正在用 React Native 编写一个小程序。我正在尝试对 SampleFunction2 进行 return 普查，并在按下按钮时将其呈现在 Flatlist 上。我不应该 return 按钮 onpress(event) 的值吗？什么是正确的做法？谢谢

    import React, { Component } from 'react';
    import { StyleSheet, FlatList,TouchableOpacity,Text, ListView,View, 
    Button, Alert } from 'react-native';
    export default class App extends Component<{}> {   

    SampleFunction2(){
     var census = [
                {name: 'Devin', id :0},
                {name:  'Jackson', id:1},
                {name:  'James', id:2},]


     return census;
   }

   render() {
    return (
      <View style={styles.container}>
      <Button onPress={this.SampleFunction2.bind(this)} title="Click here 
      to call function - One"
        //Here I was thinking I could overlay the return value into Flatlist
       />

      //<FlatList
      //<Button onPress={this.SampleFunction1.bind(this)} title= "Click 
        // here to call Function - One"/>
        //data = {this.SampleFunction2()}
       // renderItem = {({item}) =>
      //<Text>{item.id}</Text>,
       // <Text>{item.name}</Text>
     // }

     // />


      </View>
    );
  }

Answer 1

您实际上 return 来自 onPress 的值，但您可以将数据设置为组件状态并在可用时显示它。以下应该有效。

export default class App extends Component {   
  constructor() {
    this.state = {}
  }
  SampleFunction2(){
     this.setState({census: [
            {name: 'Devin', id :0},
            {name:  'Jackson', id:1},
            {name:  'James', id:2}]})
 }
 render() {
   const census = this.state.census;
   return (
     <View style={styles.container}>
       <Button onPress={this.SampleFunction2.bind(this)} title="Click here to call function - One" />

     {!census ? "" : (<FlatList data={census} renderItem={({item}) => <Text>{item.name}</Text>} />)}
     </View>
   );
 }

如何通过按下按钮从函数调用中获取 return 值？

How to return value from function call by button onpress?

javascript

native

button

reactjs

onpress