如何在反应原生的按钮的onclick中传递参数？

Question

我正在尝试将数据（服务器响应）作为按钮的参数传递。实际上，在我的情况下，有某些类型的工作人员（在卡片中列出）。如果单击工人，则应将其保存到具有相应工人 ID 的数据库中。单击工人卡时，将弹出一个显示以进行确认的弹出窗口。因此，如果单击 yes 按钮，我将使用相应工人的 ID 和执行另一个获取请求以将其保存到我的数据库。但这不起作用我很困惑如何在按钮的 onclick 属性中传递参数并在 fetch 方法中获取该参数。以下是我的代码。我只是粘贴下面是我的一部分代码。

更新代码

export default  class FirstScreen extends Component {
  constructor(){
    super();
    this.state = {
      workers: [],
        }
  }
      componentWillMount(){
            fetch('http://192.168.1.3:3000/api/worker', {
              method:'GET',
              headers:{
                Accept: 'application/json'
              }
            })
            .then(response => response.json())
            .then(responseData =>
              this.setState({
              workers:responseData
              })
            )
      }
      onPressYes = (worker_id) => {

        fetch('http://192.168.1.3:3000/api/work_detail',{
          method:'POST',
          headers:{
            Accept:'application/json'
          },
          body:JSON.stringify({
            worker_id
          })
        })
      }
  render() {
    return (

      <View style={{flex:1}}>
      <Header />
      <ScrollView>
    {this.state.workers.map((a, index)=>
<Container>
 <CardSection>
      <TouchableOpacity
       onPress={() => this.popupDialog.show()}
      >
      <View style={{ maringTop: 10, marginLeft:120}}>
      <Image
              style={{ height: 100, width: 100 }}
            source={{ uri: a.work_type == 'Carpenter' ? images[0].image : images[1].image}}
             />
         <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
         </View>
         </TouchableOpacity>
 </CardSection>
</Container>
      <View style={styles.buttonContainer}>
       <TouchableOpacity onPress={() =>console.log('Clicked')}>
       <Button
       backgroundColor="#FF4500"
       title='View Status' />
       </TouchableOpacity>
      </View>
      </ScrollView>
      <PopupDialog
                ref={popupDialog => {
                  this.popupDialog = popupDialog;
                }}
                dialogStyle={{ backgroundColor: "#FFFFFF", height: 180, width:300, borderWidth:1,padding:10}}
                overlayBackgroundColor="#fff"
                dismissOnTouchOutside={true}
                     >
             <View style={styles.dialogContentView}>
             <Text style={{fontSize:18, margingTop:10,color:"#000000"}}>Are you sure you want to submit?</Text>
             <View style={{flexDirection:'row'}}>
             <View style={styles.button_1}>
             <Button
title="Yes"
color="#FF6633"
onPress={() => this.onPressYes(worker_id)}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
color="#FF6633"
onPress={() =>this._onPressNo() }
/>
</View>
            </View>
            </View>
              </PopupDialog>
   </View>
})
    );
  }
}

workers 是我从服务器获取的数组。

Answer 1

我通常做的是返回一个带有给定参数的函数。我的意思是把一个函数包装在一个函数中，如下所示：

onClickHandler = (value) => () => {
   // do whathever you want.
};

<Component onClick={this.onClickHandler(yourValue)}/>

因为您代码中的问题是该函数将在不调用 onClick 事件的情况下执行，因为当您将参数传递给一个简单函数时，您已经在调用它。

希望对你有帮助:)

Answer 2

你可以尝试用_onPressYes = (worker_id)替换_onPressYes = (a.worker_id) with然后

body:JSON.stringify({
   worker_id
})

如果有帮助，请告诉我。