Javascript React Native onPress功能不工作
我正在做一个图书信息展示的项目。我已经成功地从服务器获取了数据，并希望通过onPress功能使模式弹出并消失。但它不起作用。情态秀，但不会让人失望 我试着把这个.togglePopoff.bind（这个）放在构造函数中，但它不起作用。 我还使用函数“togglePopoff”中的console.log（“我正在按按钮”）检查日志，但日志也没有显示 这是我的构造函数Javascript React Native onPress功能不工作,javascript,react-native,react-native-android,Javascript,React Native,React Native Android,我正在做一个图书信息展示的项目。我已经成功地从服务器获取了数据，并希望通过onPress功能使模式弹出并消失。但它不起作用。情态秀，但不会让人失望 我试着把这个.togglePopoff.bind（这个）放在构造函数中，但它不起作用。 我还使用函数“togglePopoff”中的console.log（“我正在按按钮”）检查日志，但日志也没有显示 这是我的构造函数 constructor(props) { super(props); this.state = {
constructor(props) {
super(props);
this.state = {
currentDate: new Date(),
markedDate: moment(new Date()).format(),
isPopVisible: false,
apiData: [],
activeSwitch: 1,
}
this.ISBN = null;
this.book_name = null;
this.img_src = null;
this.author = null;
this.publisher = null;
this.public_date = null;
this.more_url = null;
this.read_rate = null;
this.read_date = null;
this.category = null;
this.best = null;
this.togglePopoff = this.togglePopoff.bind(this);
}
togglePopoff = () => {
this.setState({ isPopVisible: false });
}
saveBook = () => {
this.setState({ isPopVisible: false });
}
searchBook = () => {
this.setState({ isPopVisible: true });
// popup - onoff
if(this.ISBN == null){
this.setState({ isPopVisible: false});
alert("please input ISBN code");
//return 0;
}
else {
fetch('http://220.149.242.12:10001/search/book/' + (this.ISBN), {
method: 'GET'
}).then((responseData) => {
return responseData.json();
}).then((jsonData) => {
console.log(jsonData);
this.setState({ apiData: jsonData })
console.log(this.state.apiData)
}).done();
this.ISBN = null;
this.book_name = null;
this.img_src = null;
this.author = null;
this.publisher = null;
this.public_date = null;
this.more_url = null;
this.read_rate = null;
this.read_date = null;
this.category = null;
this.best = null;
};
}
render() {
const data = this.state.apiData;
const today = this.state.currentDate;
var dataDisplay = null;
if (data && data.items) {
dataDisplay = data.items.map(function (item) {
//var image = "'" + item.image + "'";
var image = item.image;
console.log(image);
return (
<View key={item.user_name} style={styles.popfirst}>
<View style={styles.popsecond}>
<View style={styles.popthird}>
<View style={{ paddingTop: 30, }}>
<Text style={{ color: '#52C8B2', fontSize: 20, }}>book information</Text>
</View>
<View style={{ paddingTop: 20, }}>
<Image style={{ height: 250, width: 150, resizeMode: 'contain', }}
source={{ uri: image }}>
</Image>
</View>
<View style={{ paddingTop: 10, }}>
<Text style={{ fontSize: 18, }}>{item.title}</Text>
</View>
<View style={{ paddingTop: 10, }}>
<Text style={{ color: '#D7D7D7' }}>{item.author} | {item.publisher} | {item.pubdate}</Text>
</View>
<View style={styles.popbtn}>
<View style={{ width: 10, }}></View>
<View style={styles.popbtnleft}>
<SwitchButton
onValueChange={(val) => this.activeSwitch(val)}
text1='reading'
text2='done'
switchWidth={120}
switchHeight={30}
switchdirection='ltr'
switchBorderRadius={0}
switchSpeedChange={500}
switchBorderColor='#52C8B2'
switchBackgroundColor='#F2F2F2'
btnBorderColor='#52C8B2'
btnBackgroundColor='#52C8B2'
fontcolor='#333'
activeFontColor='#FFF'
/>
</View>
</View>
<View style={styles.popbtnbig}>
<TouchableOpacity style={styles.bigbtn} onPress={this.togglePopoff}><Text style={{ fontSize: 16, color: '#FFF' }}>cancle</Text></TouchableOpacity>
<TouchableOpacity style={styles.bigbtn} onPress={this.saveBook}><Text style={{ fontSize: 16, color: '#FFF' }}>save</Text></TouchableOpacity>
</View>
</View>
</View>
</View>
)
});
};
return (
<View style={cstyle.greycontainer}>
<View style={styles.firstbox}>
<Text style={{ color: '#FFF', fontSize: 20 }}>input ISBN code</Text>
</View>
<View style={styles.secondbox}>
<TextInput style={styles.input}
placeholder="Enter ISBN"
onChangeText={(text) => { this.ISBN = text }}
value={this.ISBN}
/>
<TouchableOpacity style={styles.searchbtn} onPress={this.searchBook}>
<IonIcon name="ios-search" size={30} color='#FFF' />
</TouchableOpacity>
</View>
<View style={styles.firstbox}>
<TouchableOpacity style={styles.greenbtn}>
<Text style={{ color: '#FFF', fontSize: 20 }}>cancle</Text>
</TouchableOpacity>
</View>
<Modal isVisible={this.state.isPopVisible}>
{dataDisplay}
</Modal>
</View>
);
}
}
render（）{
const data=this.state.apiData；
const today=this.state.currentDate；
var-dataDisplay=null；
if（数据和数据项）{
dataDisplay=data.items.map（函数（项）{
//var image=“””+item.image+“”；
var image=item.image；
console.log（图像）；
返回(
图书信息
{item.title}
{item.author}{item.publisher}{item.pubdate}
this.activeSwitch（val）}
text1='reading'
text2='done'
开关宽度={120}
开关高度={30}
开关方向='ltr'
switchBorderRadius={0}
switchSpeedChange={500}
switchBorderColor='#52C8B2'
switchBackgroundColor='#f2f2'
btnBorderColor='#52C8B2'
btnBackgroundColor='#52C8B2'
fontcolor='#333'
activeFontColor='#FFF'
/>
癌变
拯救
)
});
};
返回(
输入ISBN码
{this.ISBN=text}
值={this.ISBN}
/>
癌变
{dataDisplay}
);
}
}
this.togglepopfoff=this.togglepopfoff.bind（this）
由于您已经在使用arrow函数，所以不需要绑定函数。绑定方法已存在于箭头函数中
这是正确的，只需从构造函数中删除bind方法。编辑
尝试在构造函数中绑定所有函数，如下所示：
constructor(props) {
super(props);
this.state = {
currentDate: new Date(),
markedDate: moment(new Date()).format(),
isPopVisible: false,
apiData: [],
activeSwitch: 1,
}
this.ISBN = null;
this.book_name = null;
this.img_src = null;
this.author = null;
this.publisher = null;
this.public_date = null;
this.more_url = null;
this.read_rate = null;
this.read_date = null;
this.category = null;
this.best = null;
this.togglePopoff = this.togglePopoff.bind(this);
this.saveBook = this.saveBook.bind(this);
}
togglePopoff(){
this.setState({ isPopVisible: false });
}
saveBook(){
this.setState({ isPopVisible: false });
}
<TouchableOpacity style={styles.bigbtn} onPress={() => this.togglePopoff()}><Text style={{ fontSize: 16, color: '#FFF' }}>cancle</Text></TouchableOpacity>
<TouchableOpacity style={styles.bigbtn} onPress={() => this.saveBook()}><Text style={{ fontSize: 16, color: '#FFF' }}>save</Text></TouchableOpacity>
创建如下函数：
constructor(props) {
super(props);
this.state = {
currentDate: new Date(),
markedDate: moment(new Date()).format(),
isPopVisible: false,
apiData: [],
activeSwitch: 1,
}
this.ISBN = null;
this.book_name = null;
this.img_src = null;
this.author = null;
this.publisher = null;
this.public_date = null;
this.more_url = null;
this.read_rate = null;
this.read_date = null;
this.category = null;
this.best = null;
this.togglePopoff = this.togglePopoff.bind(this);
this.saveBook = this.saveBook.bind(this);
}
togglePopoff(){
this.setState({ isPopVisible: false });
}
saveBook(){
this.setState({ isPopVisible: false });
}
<TouchableOpacity style={styles.bigbtn} onPress={() => this.togglePopoff()}><Text style={{ fontSize: 16, color: '#FFF' }}>cancle</Text></TouchableOpacity>
<TouchableOpacity style={styles.bigbtn} onPress={() => this.saveBook()}><Text style={{ fontSize: 16, color: '#FFF' }}>save</Text></TouchableOpacity>
这样称呼他们：
constructor(props) {
super(props);
this.state = {
currentDate: new Date(),
markedDate: moment(new Date()).format(),
isPopVisible: false,
apiData: [],
activeSwitch: 1,
}
this.ISBN = null;
this.book_name = null;
this.img_src = null;
this.author = null;
this.publisher = null;
this.public_date = null;
this.more_url = null;
this.read_rate = null;
this.read_date = null;
this.category = null;
this.best = null;
this.togglePopoff = this.togglePopoff.bind(this);
this.saveBook = this.saveBook.bind(this);
}
togglePopoff(){
this.setState({ isPopVisible: false });
}
saveBook(){
this.setState({ isPopVisible: false });
}
<TouchableOpacity style={styles.bigbtn} onPress={() => this.togglePopoff()}><Text style={{ fontSize: 16, color: '#FFF' }}>cancle</Text></TouchableOpacity>
<TouchableOpacity style={styles.bigbtn} onPress={() => this.saveBook()}><Text style={{ fontSize: 16, color: '#FFF' }}>save</Text></TouchableOpacity>
this.togglePopoff（）}>cancle
this.saveBook（）}>save
我删除了它，但仍然无法工作。。。可能是因为isVisible in Modal标记？它正在工作，但出现了错误，“this2.togglepoff不是一个函数。（在“\u this2.togglepoff（）”，“\u this2.togglepoff”未定义）”所以现在它想做些什么，但给出了一个错误？我明白了吗？嗯…是的，我想onPress开始调用函数了。但是函数出错了。我把console.log（“working function”）放在了togglePopoff函数里面，但是log没有显示，并且给出了一个错误。谢谢你的回复，但是它也不起作用。。。仍然出现同样的错误：（我解决了！！！！！我将“dataDisplay=data.items.map（function（item）”更改为“dataDisplay=data.items.map（item=>{}”），并且运行正常！！非常感谢您的友好回复！！