React Native onClick не стреляет - PullRequest
Новая
       29

React Native onClick не стреляет

0 голосов
/ 28 января 2020

Работая над приложением React Native для Android с использованием NativeBase, у меня возникла проблема. Несмотря на использование функции стрелки, событие onClick () - в моем компоненте Button не запускается, и я не могу понять, почему.

Вот код: 

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 вместо NativeBase - та же проблема.

Ответы [ 2 ]

2 голосов
/ 28 января 2020

это называется "onPress" в родной реакции: https://facebook.github.io/react-native/docs/0.58/button

0 голосов
/ 28 января 2020

Реактивный компонент обновляется только при изменении состояния. Здесь ваша текстовая переменная изменяется, но ваш реагирующий компонент не знает, что он должен обновляться.

Вы должны использовать 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);
...