Как передать аргументы в пределах нажатия кнопки в реагировать родной? - PullRequest
Новая
       6

Как передать аргументы в пределах нажатия кнопки в реагировать родной?

0 голосов
/ 12 октября 2018

Я пытаюсь передать данные (ответ сервера) в качестве аргумента кнопки. На самом деле в моем случае есть определенный тип работников (перечисление в карточках).Если щелкнуть по работнику, он должен быть сохранен в db с соответствующим идентификатором работника. При нажатии на карточку работника появится всплывающее окно для подтверждения. Поэтому, если щелкнуть кнопку yes, я беру идентификатор соответствующего работника ивыполнить еще один запрос на выборку для сохранения его в моей базе данных. Но это не работает. Я запутался, как передавать аргументы в свойстве кнопки 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 - это массив, который я получаю с сервера.

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Что я обычно делаю, так это возвращаю функцию с заданным параметром.Я имею в виду обертывание функции в функцию, подобную следующей: 

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

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

Поскольку проблема в вашем коде заключается в том, что функция будет выполняться без вызова события onClick, поскольку при передаче аргумента простой функции выЯ уже звоню.

Надеюсь, это поможет вам:)

0 голосов
/ 12 октября 2018

Можете ли вы попробовать заменить _onPressYes = (a.worker_id) with на _onPressYes = (worker_id), а затем 

body:JSON.stringify({
   worker_id
})

Дайте мне знать, если это поможет.

...