Не удается установить State в touchablehighlight onpress

#react-native

#react-native

Вопрос:

Когда я пытаюсь установить состояние в touchablehighlight onpress, мое приложение вылетает. Это то, что я получил:

 <TouchableHighlight onPress={this.setState({toggleCharacter: false})}>
    <Image style={styles.tekstballon} source={tekstballon} />
</TouchableHighlight>
  

Моя конечная цель — переключить toggleCharacter поэтому, если это значение false, я хочу установить для него значение true, и если это true, я хочу установить для него значение false, но я не уверен, как это сделать.

Ответ №1:

Вы вызываете этот вызов setState сразу после рендеринга. Вам нужно обернуть это в функцию, которая будет вызываться при нажатии вместо этого, т.Е.:

 <TouchableHighlight onPress={() => this.setState({toggleCharacter: false})}>
  

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

Отредактировано для ответа на комментарий. «Лучшим» способом сделать это, упомянутым выше, было бы:

 class myComponent extends React.Component {

  /*
    ...ctor and methods above
    The below assumes Property initializer syntax is available.
    If not, you need to autobind in the constructor
  /*
  handleOnPress = () => this.setState({ toggleCharacter: false })

  render() {
    return (
      <TouchableHighlight onPress={this.handleOnPress}>
        <Image style={styles.tekstballon} source={tekstballon} />
      </TouchableHighlight>
    );
  }
}
  

Комментарии:

1. Спасибо, это работает, но я не понимаю, как именно я мог бы сделать это лучше. Должен ли я создать функцию вне рендеринга и вызвать ее при нажатии?

2. Смотрите комментарий выше, но по сути да, вы просто превратите его в метод в самом классе.