无法绑定反应原生

时间:2016-05-10 17:07:14

标签: reactjs react-native ecmascript-6

我已经尝试了所有可能的解决方案。我已经尝试过其他几种类似问题的解决方案,但我不明白这是怎么回事。我试图从ListView renderRow方法内部调用一个函数。我现在可以调用该函数,但我无法传入我需要的所选rowData。这就是我得到的:

screenshot

我需要选择的rowData。这是代码

     constructor(props) {
        super(props);
        this.onSubmitTrip = this.onSubmitTrip.bind(this);
        this.onSelectTrip = this.onSelectTrip.bind(this);
        this.renderRow = this.renderRow.bind(this);

        this.state = {
            dataSource: ds,
            showSubmitTripBtn: false
        }
    }
    onSelectTrip(rowData) {
        selectedTrip = rowData;
    }

  renderRow(rowData) {
        return (
            <TouchableHighlight onPress={this.onSelectTrip}  underlayColor='#dddddd'>
                <View style={styles.row}>
                    <View style={{ paddingLeft: 5 }}>
                        <View>
                            <Text style={{ fontWeight: "bold", fontSize: 24 }}>{rowData.tripName}</Text>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

2 个答案:

答案 0 :(得分:1)

如何使用ES6 lambda而不是显式绑定类构造函数中的所有方法来提供词法绑定。我认为这应该可以解决您的问题:

constructor(props) {
    super(props);
    this.onSubmitTrip = this.onSubmitTrip.bind(this);
    this.renderRow = this.renderRow.bind(this);

    this.state = {
        dataSource: ds,
        showSubmitTripBtn: false
    }
}

onSelectTrip = (rowData) => {
    selectedTrip = rowData;
}

renderRow(rowData) {
    return (
        <TouchableHighlight onPress={this.onSelectTrip(rowData)}  underlayColor='#dddddd'>
            <View style={styles.row}>
                <View style={{ paddingLeft: 5 }}>
                    <View>
                        <Text style={{ fontWeight: "bold", fontSize: 24 }}>{rowData.tripName}</Text>
                    </View>
                </View>
            </View>
        </TouchableHighlight>
    )
}

答案 1 :(得分:1)

好的,从我所看到的,当你的TouchableHighlight被按下时,你实际上并没有传递{number 1}你的rowData。

onSelectTrip

另外,在查看截图时,我注意到// Change this <TouchableHighlight onPress={this.onSelectTrip} underlayColor='#dddddd' > // To this <TouchableHighlight onPress={() => this.onSelectTrip(rowData)} underlayColor='#dddddd' > 方法中的另一个潜在问题是你的lodash onSelectTrip调用。如果你想在其中使用_.each,你需要传递_.each一个胖箭头作为回调。

this.setState()