Question

我正在做一个显示书本信息的项目。我已成功从服务器获取数据，并希望使用onPress函数使模式弹出并消失。但它不起作用。模态节目，但不会让人失望。

我尝试将this.togglePopoff.bind（this）放在构造函数中，但是没有用。我还使用功能'togglePopoff'中的console.log（“我按下按钮”）检查了日志，但该日志也未显示。

这是我的构造函数

/* Your table*/
DROP TABLE #tblAttendance
CREATE TABLE #tblAttendance(fkStudentID int, Status varchar(20), Dated date)

/* The date to probe */
DECLARE @Dated AS date = '01-Apr-2019',
    @Days varchar(1000), @DaySelector varchar(2000);

/* Mock data: Student Id: 1 is absent on 20th April; Id 12 is Absent on 15th */
INSERT INTO #tblAttendance (fkStudentID, Status, Dated)
SELECT *
FROM (VALUES 
    (1, 'Absent', '20-Apr-2019'),
    (12, 'Absent', '15-Apr-2019')

) AS V1(fkStudentID, Status, Dated)

/* Fetch the days of the month */
SELECT @Days = COALESCE(@Days + ',', '') + QUOTENAME(CAST(Number + 1 AS VARCHAR(5))),

        -- Form a column selector for day's values; to be used in the dynamic query
        @DaySelector = COALESCE(@DaySelector + ',', '') + IIF(d.Day_Name = 'Sunday', 
            '''S'' AS ' + QUOTENAME(CAST(Number + 1 AS VARCHAR(5))),                                                            -- Value 'S' for Sundays        
            'ISNULL(' + QUOTENAME(CAST(Number + 1 AS VARCHAR(5))) + ', ''P'') AS ' + QUOTENAME(CAST(Number + 1 AS VARCHAR(5)))  -- 'P' for NULLs
        )
FROM master..spt_values
CROSS APPLY (

    -- Find out day names
    SELECT DATENAME(weekday, CAST(YEAR(@Dated) AS varchar(4)) + RIGHT('00' + CAST(MONTH(@Dated) AS varchar(2)), 2) + RIGHT('00' + CAST([number] + 1 AS VARCHAR(2)), 2)) AS Day_Name
    ) AS d
WHERE type = 'P'
AND
(CAST(CAST(YEAR(@Dated) AS VARCHAR) + '-' + CAST(MONTH(@Dated) AS VARCHAR) + '-01' AS DATETIME) + Number)
<
DATEADD(mm,1,CAST(CAST(YEAR(@Dated) AS VARCHAR) + '-' + CAST(MONTH(@Dated) AS VARCHAR) + '-01' AS DATETIME))

/* Prepare dynamic SQL */
DECLARE @SQL AS nvarchar(MAX)
    SET @SQL = 
    'WITH PIVOT_DATA AS (' +
        'SELECT fkStudentID, ' + @Days + ' ' +

        'FROM('+
            'SELECT '+
               'fkStudentID, Status, DAY(Dated) as [DayValue] '+
          'From #tblAttendance Where MONTH(Dated) = MONTH(@Dated) and YEAR(Dated) = YEAR(@Dated)'+
        ') AS studAttd '+
        'PIVOT'+
        '('+
            'MAX(Status)'+
            'FOR [DayValue] IN (' + @Days + ')'+
        ') AS pvt' +
    ')' +
    ' SELECT fkStudentID, ' + @DaySelector + ' FROM PIVOT_DATA'

PRINT @SQL
EXEC sp_executesql @stmt = @SQL, @params = N'@Dated date, @Days varchar(1000)', @Dated = @Dated, @Days = @Days

这是我消失模态的功能。

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

这是我的searchBook函数。

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

}

这就是onPress的去处。

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

如何取消模态？

Answer 1

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

由于您已经在使用箭头功能，因此无需绑定功能。绑定功能已经存在于箭头功能中。

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

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

Answer 2

修改尝试像这样将所有函数绑定在constructor中：

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>

React Native onPress功能不起作用

2 个答案: