如何在React Native的按钮的onclick内传递参数？

Question

I am trying to pass a data (server response) as an argument of a button.Actually in my case there are certain type of workers (listing within cards ). If clicked on a worker it should be saved to db with the corresponding worker's id.Upon clicking on the card of workers there will be a popup showing for confirmation.So if clicked on yes button I'm taking the corresponding worker's id and perform another fetch request for saving it to my db.But this is not working I'm confused how to pass arguments within onclick property of a button and take that argument within fetch method.Following is my code.I'm pasting only a portion of my code below.

updated code

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 is the array I'm fetching from server.

Answer 1

Can you try replacing _onPressYes = (a.worker_id) with with _onPressYes = (worker_id) and then

body:JSON.stringify({
   worker_id
})

Let me know if that helps.

Answer 2

What I usually do is return a function with the given parameter. I mean wrap a function in a function like the following:

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

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

Because the problem in your code is that the function will be execute without calling the onClick event because when you pass the argument to a simple function you are already calling it.

I hope it can help you :)