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

您可以尝试将_onPressYes = (a.worker_id) with替换为_onPressYes = (worker_id)，然后

body:JSON.stringify({
   worker_id
})

让我知道是否有帮助。

Answer 2

我通常要做的是返回具有给定参数的函数。我的意思是将函数包装在如下函数中：

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

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

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

我希望它可以为您提供帮助：）

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

2 个答案: