React Native屬性未傳遞給子組件

Question

我有以下問題。

我正在創建一個React Native應用程序，我想將點擊處理程序傳遞給子組件。 但是，當我嘗試在子組件中調用單擊處理程序時，我不斷收到_this.props.onItemPress is not a function Exception。

當我嘗試通過父內部的.bind(this)傳遞函數時，它表示函數未定義。

這是我的代碼：

父級

  constructor(props) {
    super(props)

    this.handleTodoPress = this.handleTodoPress.bind(this)
  }

 ...

  handleTodoPress(event) {
    console.warn('Press handled')
  }

  renderItem ({section, item}) {
    return <TodoItem onItemPress={this.handleTodoPress} title={item.title} description={item.description} completed={item.completed} />
  }

...

  render () {
    return (
      <View style={styles.container}>
        <SectionList
          renderSectionHeader={this.renderSectionHeader}
          sections={this.state.data}
          contentContainerStyle={styles.listContent}
          data={this.state.dataObjects}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          initialNumToRender={this.oneScreensWorth}
          ListHeaderComponent={this.renderHeader}
          SectionSeparatorComponent={this.renderSectionSeparator}
          ListEmptyComponent={this.renderEmpty}
          ItemSeparatorComponent={this.renderSeparator}
          renderSectionFooter={this.renderSectionFooter}
        />
      </View>
    )
  }
}

兒童

import React, { Component } from 'react';
import { TouchableOpacity, View, Text, } from 'react-native';
import styles from './Styles/TodoItemStyles'

export default class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.state = {completed: 'Todo'}

    this.setCompletedState = this.setCompletedState.bind(this)
  }

  itemPressed = (e) => {
    console.warn(this.props);
    this.props.onItemPress(e)
  }

  setCompletedState() {
    if (this.props.completed == true) {
      this.setState({completed: 'Completed'})
    }
  }

  componentWillMount() {
    this.setCompletedState()
  }

  render() {

    return (
      <TouchableOpacity onPress={this.itemPressed}>
        <View style={styles.todoContainer}>
          <Text style={styles.itemTitle}>{this.props.title}</Text>
          <Text style={styles.itemDescription}>{this.props.description}</Text>
          <Text style={[styles.itemLabel, this.props.completed ? styles.itemLabelCompleted : styles.itemLabelNotCompleted]}>{this.state.completed}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

Answer 1

我認為您的問題是，如何將箭頭功能用於itemPressed 。 請嘗試重寫它，並結合this為itemPressed像你一樣對同一setCompletedState 。

Answer 2

嘗試：

export default class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.state = {completed: 'Todo'}

    this.setCompletedState = this.setCompletedState.bind(this)
  }

  itemPressed(e){
    console.warn(this.props);
    this.props.onItemPress(e)
  }

  setCompletedState() {
    if (this.props.completed == true) {
      this.setState({completed: 'Completed'})
    }
  }

  componentWillMount() {
    this.setCompletedState()
  }

  render() {

    return (
      <TouchableOpacity onPress={this.itemPressed}>
        <View style={styles.todoContainer}>
          <Text style={styles.itemTitle}>{this.props.title}</Text>
          <Text style={styles.itemDescription}>{this.props.description}</Text>
          <Text style={[styles.itemLabel, this.props.completed ? styles.itemLabelCompleted : styles.itemLabelNotCompleted]}>{this.state.completed}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

當你使用

  itemPressed = (e) => {
    console.warn(this.props);
    this.props.onItemPress(e)
  }

表示法將函數中的當前上下文綁定