Question

我有以下问题。

我正在创建一个React Native应用程序，我想将一个单击处理程序传递给子组件。但是当我尝试调用子组件中的click处理程序时，我不断收到_this.props.onItemPress is not a function异常。

当我尝试在父级内部传递.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)
  }

符号绑定函数内的当前上下文

React Native属性未传递给子组件

2 个答案: