Question

我对onPress按钮功能有疑问，如果我创建按钮并直接调用函数就可以很好地工作，但是如果我使用的是有条件的，它将不会调用该函数。

我已经在下面创建了2个按钮进行模拟，标题为“ submit normal”的按钮可以调用函数并成功传递属性，标题为“ submit conditional”的按钮将不会调用this.makeRemoteRequest.bind(this);，但是如果您发出警告，它将反应正常，调用函数不会发生任何事情。

    <Input
      containerStyle={{ width: '90%' }}
      placeholder="Predefined User ID"
      label="User ID"
      labelStyle={{ marginTop: 16 }}
      editable={false}
      value={this.state.userid}
      onChangeText={input_user_id => this.setState({ input_user_id })}
    />

    <Input
      containerStyle={{ width: '90%' }}
      placeholder="Please fill services request notes here"
      label="Reason"
      labelStyle={{ marginTop: 16 }}
      onChangeText={input_services_detail => this.setState({ input_services_detail })}
    />

    <Button
        title='Submit Conditional'
        onPress={() => {
          if (this.state.input_services_detail != null)
          {
            this.makeRemoteRequest.bind(this);
          }
          else
          {
            Alert.alert('Please fill the service detail first');
          }
        }}><Text style={styles.buttonText}>Submit Aset</Text>
    </Button>

    <Button
        title='Submit Normal'
        onPress={this.makeRemoteRequest.bind(this)}><Text style={styles.buttonText}>Submit Aset</Text>
    </Button>

  </View>

期望使用条件调用函数。感谢有人可以向我介绍这一情况。谢谢你。

Answer 1

您没有在自己的情况下呼叫this.makeRemoteRequest，而是在绑定它。像这样更改您的条件onPress道具：

onPress={this.state.input_services_detail != null ? this.makeRemoteRequest.bind(this) : () => Alert.alert('Please fill the service detail first')}

您不需要!= null：

onPress={this.state.input_services_detail ? this.makeRemoteRequest.bind(this) : () => Alert.alert('Please fill the service detail first')}

Answer 2

我会说这是实现这种行为的一种不好的做法。

一种更好的书写方式是这样-

<Button
    title='Submit Conditional'
    onPress={this.onPressSubmitButton.bind(this)}>
    <Text style={styles.buttonText}>Submit Aset</Text>
</Button>

将onPress函数的名称更改为onPressSubmitButton

和onPressSubmitButton函数-

onPressSubmitButton() {
   if (this.state.input_services_detail === null) {
       return Alert.alert('Please fill the service detail first')
   }

   this.makeRemoteRequest()
}

我认为阅读和理解更加清晰。

您还可以这样编写函数签名-

onPressSubmitButton = () => {
   ...
}

已经绑定，可以这样称呼它-

<Button
    title='Submit Conditional'
    onPress={this.onPressSubmitButton}>
    <Text style={styles.buttonText}>Submit Aset</Text>
</Button>

有条件的Onpress不会调用函数

2 个答案: