本机基本列表项单击事件不起作用
Native base list item click event not working
我两天前才开始学习 React Native。我正在使用 Native Base UI 框架中的列表项组件。
根据他们的文档和示例,要在 ListItem
上捕获点击事件,您需要向 ListItem 添加 onPress
和 button
选项。但就我而言,它不起作用。
我有另一个元素也跟踪点击事件,它工作正常,但列表元素没有捕捉到点击事件。
奇怪的是,如果我触发警报,它会起作用
<List button onPress={() => { Alert.alert('Item got clicked!') } }>
下面是我的完整代码
import React from 'react';
import {
Content,
List,
ListItem,
Body,
Thumbnail,
Text,
Badge,
View
} from 'native-base';
import { ActivityIndicator, TouchableHighlight, TouchableOpacity, Alert } from 'react-native';
export default class Questions extends React.Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
this.props.onPress();
}
render() {
var items = this.props.items;
return (
<Content>
<List button onPress={() => { this.handleClick } }>
{Object.keys(items).map(function(eachQuestion) {
return (
<ListItem avatar key={items[eachQuestion].id} button onPress={() => { this.handleClick } } >
<Body>
<Text>{items[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
<TouchableOpacity onPress={this.handleClick}>
<View><Text>Click me</Text></View>
</TouchableOpacity>
</Content>
);
}
}
编辑 1
render() {
var questions = {
"1" : "James",
"2" : "Smith",
"3" : "Doe",
"4" : "Smith"
};
return (
<Container>
<Content>
<List>
{Object.keys(questions).map(function(key) {
return (<ListItem button={true} onPress={this.handleClick}>
<Text>{questions[key]}</Text>
</ListItem>
)
})}
</List>
</Content>
</Container>
);
}
** 最终解决方案 **
handleClick(){
Alert.alert("I got clicked");
}
render() {
var questions = this.props.questions;
return (
<Content>
<List>
{Object.keys(questions).map((eachQuestion) => {
return (
<ListItem key={questions[eachQuestion].id} button={true} onPress={this.handleClick} >
<Body>
<Text>{questions[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
</Content>
);
}
两个错误:
- 你应该温习一下你的 ES6 arrow function expressions。你没有调用你的
handleClick
函数,这就是为什么你的 Alert
示例没有发生任何事情(因为你实际上正在做某事)。
- 您没有定义
button
属性的值。文档说没有默认值,所以最好将其定义为 true
或 false
.
因此,要修复您的代码,您应该像这样为 ListItem
定义道具:
button={true}
onPress={() => { this.handleClick() }}
或使其更短:
button={true}
onPress={this.handleClick}
我也不确定为什么要在 List
组件上定义 button
和 onPress
属性,因为它是您尝试单击的 ListItem
,而不是整个 List
本身。但由于这不是问题的一部分,我不会解决这个问题。
工作代码的完整示例:
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
//this.props.onPress();
}
render() {
return (
<Container>
<Content>
<List>
<ListItem button={true} onPress={this.handleClick}>
<Text>Simon Mignolet</Text>
</ListItem>
<ListItem button={true} onPress={() => { this.handleClick() }}>
<Text>Nathaniel Clyne</Text>
</ListItem>
<ListItem button={true} onPress={this.handleClick}>
<Text>Dejan Lovren</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
}
我两天前才开始学习 React Native。我正在使用 Native Base UI 框架中的列表项组件。
根据他们的文档和示例,要在 ListItem
上捕获点击事件,您需要向 ListItem 添加 onPress
和 button
选项。但就我而言,它不起作用。
我有另一个元素也跟踪点击事件,它工作正常,但列表元素没有捕捉到点击事件。
奇怪的是,如果我触发警报,它会起作用
<List button onPress={() => { Alert.alert('Item got clicked!') } }>
下面是我的完整代码
import React from 'react';
import {
Content,
List,
ListItem,
Body,
Thumbnail,
Text,
Badge,
View
} from 'native-base';
import { ActivityIndicator, TouchableHighlight, TouchableOpacity, Alert } from 'react-native';
export default class Questions extends React.Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
this.props.onPress();
}
render() {
var items = this.props.items;
return (
<Content>
<List button onPress={() => { this.handleClick } }>
{Object.keys(items).map(function(eachQuestion) {
return (
<ListItem avatar key={items[eachQuestion].id} button onPress={() => { this.handleClick } } >
<Body>
<Text>{items[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
<TouchableOpacity onPress={this.handleClick}>
<View><Text>Click me</Text></View>
</TouchableOpacity>
</Content>
);
}
}
编辑 1
render() {
var questions = {
"1" : "James",
"2" : "Smith",
"3" : "Doe",
"4" : "Smith"
};
return (
<Container>
<Content>
<List>
{Object.keys(questions).map(function(key) {
return (<ListItem button={true} onPress={this.handleClick}>
<Text>{questions[key]}</Text>
</ListItem>
)
})}
</List>
</Content>
</Container>
);
}
** 最终解决方案 **
handleClick(){
Alert.alert("I got clicked");
}
render() {
var questions = this.props.questions;
return (
<Content>
<List>
{Object.keys(questions).map((eachQuestion) => {
return (
<ListItem key={questions[eachQuestion].id} button={true} onPress={this.handleClick} >
<Body>
<Text>{questions[eachQuestion].question}</Text>
</Body>
</ListItem>
)
})}
</List>
</Content>
);
}
两个错误:
- 你应该温习一下你的 ES6 arrow function expressions。你没有调用你的
handleClick
函数,这就是为什么你的Alert
示例没有发生任何事情(因为你实际上正在做某事)。 - 您没有定义
button
属性的值。文档说没有默认值,所以最好将其定义为true
或false
.
因此,要修复您的代码,您应该像这样为 ListItem
定义道具:
button={true}
onPress={() => { this.handleClick() }}
或使其更短:
button={true}
onPress={this.handleClick}
我也不确定为什么要在 List
组件上定义 button
和 onPress
属性,因为它是您尝试单击的 ListItem
,而不是整个 List
本身。但由于这不是问题的一部分,我不会解决这个问题。
工作代码的完整示例:
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
//this.props.onPress();
}
render() {
return (
<Container>
<Content>
<List>
<ListItem button={true} onPress={this.handleClick}>
<Text>Simon Mignolet</Text>
</ListItem>
<ListItem button={true} onPress={() => { this.handleClick() }}>
<Text>Nathaniel Clyne</Text>
</ListItem>
<ListItem button={true} onPress={this.handleClick}>
<Text>Dejan Lovren</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
}