Добавление кнопки в FlatList в React Native

У меня есть 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
person craftdeer    schedule 14.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Измените свою функцию следующим образом:

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

И передайте название фильма следующим образом:

<Button onPress={this.mybuttonclick(item.original_title)} title="hello"/>
person Ivalo Pajumets    schedule 14.01.2018
comment
Спасибо. он показывает предупреждения. Но оповещения запускаются, как только запускается программа. - person craftdeer; 15.01.2018
comment
@craftdeer измените onPress на onPress={() => this.mybuttonclick(item.original_title)} - person Ivalo Pajumets; 15.01.2018
comment
Потрясающий. Не могли бы вы объяснить функцию стрелки в своем последнем комментарии? - person craftdeer; 15.01.2018
comment
@craftdeer объясняет в этой статье это очень тщательно. - person Ivalo Pajumets; 16.01.2018

arrow_upward
0
arrow_downward

Вы должны использовать функцию толстой стрелки в onPress вот так.

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