在 React Native 的 FlatList 中添加一个按钮答案

【问题标题】：Adding a button in a FlatList in React Native在 React Native 的 FlatList 中添加一个按钮
【发布时间】：2018-01-14 18:02:23
【问题描述】：

我有一个 FlatList，我试图在项目下方添加一个按钮，当您单击该按钮时，它应该在警报中显示项目的名称。

class TopMovies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        apiTopLoaded: false,
        topPopularMovies: [],
    }
    this.conditionalTopPopular = this.conditionalTopPopular.bind(this);
    this.mybuttonclick = this.mybuttonclick.bind(this);
}

componentDidMount() {
fetch('someurls')
    .then((response)=>{
        response.json()
            .then((popularMovies) => {
                this.setState({
                    apiTopLoaded: true,
                    topPopularMovies: popularMovies.results,
                })
            })
    })    


mybuttonclick() {
    Alert.alert(item.original_title)
}

conditionalTopPopular() {
    if(this.state.apiTopLoaded===true) {
        return(
                <FlatList
                    horizontal={true}
                    data={this.state.topPopularMovies}
                    renderItem={({ item }) => (
                    <View>

                        <Text>{item.original_title}</Text>
                        <Button onPress={this.mybuttonclick} title="hello"/>
                    </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        )

    }
}

我可以看到列表中的所有电影名称，并且看到电影名称下方的按钮，但是当我单击它时，它显示“找不到变量项”。函数mybuttonclick 应该提醒item.original_title 属性，因为它在平面列表中正确显示。请帮忙。

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

像这样改变你的函数：

mybuttonclick(movieTitle) {
    Alert.alert(movieTitle)
}

然后像这样传入电影标题：

<Button onPress={this.mybuttonclick(item.original_title)} title="hello"/>

【讨论】：

谢谢。它正在显示警报。但程序一运行，警报就会运行。
@craftdeer 将 onPress 更改为 onPress={() => this.mybuttonclick(item.original_title)}
太棒了。您能解释一下您上一条评论中的箭头功能吗？
@craftdeer 这个article 解释得很透彻。

【解决方案2】：

你应该像这样使用onPress中的粗箭头函数。

<Button onPress={() => this.mybuttonclick(item.original_title)} title="hello"/>

【讨论】：