React Native onClick 没有触发

Question

使用 NativeBase 为 Android 开发 React Native 应用程序时，我遇到了一个问题。尽管使用了箭头函数，但我的 Button 组件中的 onClick() 事件没有触发，我不明白为什么。

代码如下：

import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';

let text = '';

class SearchBar extends React.Component {
  onButtonClick = () => {
    text = 'yes';
  };

  render() {
    return (
      <View>
        <Header searchBar rounded>
          <Item>
            <Icon name="ios-search" />
            <Input placeholder="Search" />
          </Item>
        </Header>
        <Button onClick={() => this.onButtonClick()}>
          <Text>Search</Text>
        </Button>
        <Text>Is the button clicked? {text}</Text>
      </View>
    );
  }
}

export default withNavigation(SearchBar);

你能帮帮我吗？在所有其他组件中，我完全按照上面的示例实现了事件功能，并且这些功能正在运行。上面那个有什么问题？

我还尝试了 React-Native 的 Button 而不是 NativeBase - 同样的问题。

Answer 1

在react native中被称为"onPress" 参考：https://facebook.github.io/react-native/docs/0.58/button

Answer 2

React 组件仅在状态更改时更新。在这里，你的文本变量改变了，但你的反应组件不知道它必须更新。

您应该使用 onPress 而不是 onClick 并执行此操作以触发重新渲染（更新状态）：

import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';


class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  onButtonClick = () => {
    this.setState({text: 'yes'});
  };

  render() {
    return (
      <View>
        <Header searchBar rounded>
          <Item>
            <Icon name="ios-search" />
            <Input placeholder="Search" />
          </Item>
        </Header>
        <Button onPress={() => this.onButtonClick()}>
          <Text>Search</Text>
        </Button>
        <Text>Is the button clicked? {this.state.text}</Text>
      </View>
    );
  }
}

export default withNavigation(SearchBar);

React Native onClick 没有触发

React Native onClick is not firing

react-native

native-base