javascript - React Native onPress 功能不起作用

Question

我正在处理一些显示图书信息的项目。我已成功从服务器获取数据，并希望使用 onPress 函数使模态弹出和消失。但它不工作。模态显示，但不会消失。

我试过将 this.togglePopoff.bind(this) 放在构造函数中，但它没有用。我还在函数“togglePopoff”中使用 console.log("I'm pressing button") 检查日志，但日志也没有显示。

这是我的构造函数

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 函数。

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;
    };
}

这就是 onPress 所在的位置。

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>
    );

}
}

我怎样才能关闭模式？

Answer 1

this.togglePopoff = this.togglePopoff.bind(this);

As you are already using arrow function, so you need not to bind your function. bind method is already present in arrow functions.

togglePopoff = () => {
    this.setState({ isPopVisible: false });
}

这是正确的，只需从构造函数中删除绑定(bind)方法。