Question

伙计们我遇到onPress事件的问题！如果我改变TextInput值函数_find（）工作，但点击按钮事件不起作用。控制台出错：“警告：道具类型失败：道具onPress在Button标记为必需，但其值为undefined。 “

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View,StyleSheet,Button } from 'react-native';


export default class inputText extends Component {
  _find(){
    fetch('https://google.com')
    .then((response) => response.text())
    .then((text)=>{ console.debug(text) })
    
  }
  constructor(props) {
    super(props);
    this.state = {text: null};
  }

  render() {
    return (
      <View style={{margin: 20}}>
        <TextInput
          style = {styles.searchInput}
          placeholder="Type here to search"
          onChangeText={(text) => this.setState({text})}
        />
         <Button
          onPress={this._find()}
          title='Find'
          color="#841584"
          accessibilityLabel="on"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  searchInput:{
    fontSize:20,
    paddingTop:20,
    paddingBottom:20
   
    
  }
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => inputText);

Answer 1

省略括号，否则它将执行函数而不是将其作为回调传递：

onPress={this._find}

如果您需要访问this中的类实例，还需要将方法绑定到constructor中的_find：

constructor(props) {
  ...
  this._find = this._find.bind(this);
}

Answer 2

按下按钮时，您可能想要调用方法 _find _ 。但是，您实际在做的是在呈现组件时调用该方法，然后将该方法调用的结果（ undefined ）分配给 onClick 处理程序。

您可以通过将 onClick 道具的值转换为匿名箭头功能来解决此问题，如下所示：

<Button
  onPress={() => this._find()}
  title='Find'
  color="#841584"
  accessibilityLabel="on"
/>

React Native，在onPress上工作不正确

2 个答案: