反应原生：有办法将函数传递给“onpress”吗？答案

【问题标题】：react native : there is way to pass a function into "onpress"?反应原生：有办法将函数传递给“onpress”吗？
【发布时间】：2020-02-25 14:43:35
【问题描述】：

有办法将函数传递给“onpress”吗？

我需要将“postData”函数传递给“onpress”按钮，我该怎么做？在我的代码中，我想在“postData”中传递 2 个“onpress”。如果有一些错误，请告诉我，我会修复它。例如，这是我的代码：

export default class OrderInformationScreen extends Component {

    constructor(props) {
        super(props);
        const { state } = props.navigation;
        this.state = {
            title: state.params.data
        }
        //alert(JSON.stringify((state.params.data.SHORT_TEXT)))
    }



        postData = () => {
            const postData = {
              ACTOR_ID:"APAZ",         
              REPORT_KEY:"001",      
              WORK_ITEM_ID:"000018639250",
              NOTE:"fun all time"
            }
          const axios = require('axios')
          axios.post('https://harigotphat1.mekorot.co.il/ConfirmPackaotWS/OrderApprove/OrderApprove_OrderApp_Save_Approvement/'+ postData)
              .then(function (response) {
                  console.log("roei response======>>>>",response);
              })
      }



    render() {
        return (
            <>
                <View
                    style={{
                        alignItems: 'flex-start',
                        justifyContent: 'center',
                        borderColor: 'blue',
                        flexDirection: "row",
                        justifyContent: 'space-evenly'
                    }}>
                    <TouchableOpacity onPress={() => console.log("cancel!")}>
                        <Avatar
                            size='large'
                            containerStyle={{ marginTop: 30 }}
                            activeOpacity={0.2}
                            rounded
                            source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
                            onPress={() => console.log("cancel!")} />
                        <View >
                            <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'red' }}>לדחות</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => console.log("works!")}> ///HERE I NEED PASS postData 
                        <Avatar
                            size='large'
                            activeOpacity={0.1}
                            rounded
                            source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
                            onPress={() => console.log("Works!")} />
                        <View>
                            <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'green', marginHorizontal: 6 }}>לאשר</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <InfoTable headerInfo={this.state.title}></InfoTable>
            </>
        );
    };
}

【问题讨论】：

你要调用 postData() 函数吗？
onPress={this.postData}
我觉得应该改成onPress={() => this.postData()}
@SunnyParekh 如果你不需要向函数传递任何参数，你就不需要那样传递它
@Auticcat，如果你不这样传递，它会在渲染组件时调用该方法。

标签： javascript reactjs react-native expo

【解决方案1】：

检查更新后的代码

export default class OrderInformationScreen extends Component {
  constructor(props) {
    super(props);
    const { state } = props.navigation;
    this.state = {
      title: state.params.data
    };
    //alert(JSON.stringify((state.params.data.SHORT_TEXT)))
  }

  postData = () => {
    const postData = {
      ACTOR_ID: "APAZ",
      REPORT_KEY: "001",
      WORK_ITEM_ID: "000018639250",
      NOTE: "fun all time"
    };
    const axios = require("axios");
    axios
      .post(
        "https://harigotphat1.mekorot.co.il/ConfirmPackaotWS/OrderApprove/OrderApprove_OrderApp_Save_Approvement/" +
          postData
      )
      .then(function(response) {
        console.log("roei response======>>>>", response);
      });
  };

  render() {
    return (
      <>
        <View
          style={{
            alignItems: "flex-start",
            justifyContent: "center",
            borderColor: "blue",
            flexDirection: "row",
            justifyContent: "space-evenly"
          }}
        >
          <TouchableOpacity onPress={() => console.log("cancel!")}>
            <Avatar
              size="large"
              containerStyle={{ marginTop: 30 }}
              activeOpacity={0.2}
              rounded
              source={require("../assets/down.png")}
              style={{ height: 80, width: 80 }}
              onPress={() => console.log("cancel!")}
            />
            <View>
              <Text style={{ fontSize: 25, fontWeight: "bold", color: "red" }}>
                לדחות
              </Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.postData()}>
            <Avatar
              size="large"
              activeOpacity={0.1}
              rounded
              source={require("../assets/up.png")}
              style={{ height: 80, width: 80 }}
              onPress={() => console.log("Works!")}
            />
            <View>
              <Text
                style={{
                  fontSize: 25,
                  fontWeight: "bold",
                  color: "green",
                  marginHorizontal: 6
                }}
              >
                לאשר
              </Text>
            </View>
          </TouchableOpacity>
        </View>
        <InfoTable headerInfo={this.state.title}></InfoTable>
      </>
    );
  }
}

你可以这样放函数

<TouchableOpacity onPress={() => this.postData()}> .... </TouchableOpacity>

【讨论】：