提交失敗后，根據單選按鈕和輸入字段的值過濾React中表中的數據

Question

我有用於創建表的本地json文件中的數據。 在Table類組件中，我的表包含前十部電影。 正在從filteredData狀態變量顯示數據，並且在加載表后可以很好地顯示數據。 上面的表格中有2個單選按鈕，用於選擇是否要通過使用函數searchHandler基於保存在狀態變量radioSearch中的列標題或列流派來搜索數據。 然后，我有了一個輸入字段，當我在其中輸入字符串時，通過使用updatedSearch函數將結果保存在searchFieldInput狀態變量中。 最后，我在此組件中具有SubmitHandler函數，以根據選定的單選按鈕（電影的標題/類型）過濾表格，然后根據輸入字段中輸入的字符串過濾表格。 我將過濾后的數據放入filteredData變量中，以便使用setState更新狀態。 不幸的是，點擊提交后沒有進行過濾。 在Table組件中嵌套有TableRow組件，該組件應基於所應用的過濾顯示數據。 我不知道SubmitHandler函數的概念是否錯誤，為什么不過濾數據？ 有人可以幫忙嗎？ 這是我的表格組件：

import React, {Component} from 'react';
import TableRow from './TableRow/TableRow';

    class Table extends Component {
        constructor(props) {
            super(props)
            this.state = {
                filteredData: this.props.data,
                searchFieldInput: '',
                radioSearch: this.props.radioSearch,
                transformed: false
            }
        }

        updatedSearch = (event) => {
            this.setState({
                searchFieldInput: event.target.value
            })
        }

        searchHandler = (e) => {
            this.setState({
                radioSearch: e.target.value
            })
        };

        submitHandler = (event) => {

            event.preventDefault();

            if(this.state.radioSearch === "title") {
                let filteredData = this.props.data.filter(column => {
                    return column.title.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            }); 
                this.setState({
                    filteredData: filteredData
                });

                return this.state.filteredData;

            }   else if(this.state.radioSearch === "genre"){
                let filteredData = this.props.data.filter(column => {
                    return column.genre.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            });
                this.setState({
                    filteredData: filteredData
                });

                return this.state.filteredData;
            }

            console.log(this.state.radioSearch);
        }

        render() {

                let filteredData = this.props.data.filter(column => {
                    return column.title.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            }); 
            return(
                <React.Fragment>
                    <div className="container-fluid">
                        <div className="container">
                            <form>
                                {/*Search field*/}  
                                <input
                                    className={"Search" + (this.state.transformed === true ?
                                            ' transformed' : '')} 
                                    type="text"
                                    placeholder={(this.state.transformed === true ? 
                                    '' : 'Type here')}
                                    maxLength="20"
                                    value={this.state.searchFieldInput} required
                                    onChange={this.updatedSearch.bind(this)}
                                />

                                <button type="submit">
                                    Search
                                </button>

                                {/*Radio buttons*/}
                                <label htmlFor="title">
                                    <input type="radio" name="title" id="title" value="title" checked={this.state.radioSearch === "title"} 
                                    onChange={this.searchHandler}/>
                                    title
                                </label>
                                <label htmlFor="genre">
                                    <input type="radio" name="genre" id="genre" value="genre" checked={this.state.radioSearch === "genre"} 
                                    onChange={this.searchHandler}/>
                                    genre
                                </label> 
                            </form>
                        </div>
                        <div className="container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Picture</th>
                                        <th>Release date</th>
                                        <th>Genre</th>
                                        <th>Rating</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   {this.state.filteredData.map((row, index) => {
                                        return (
                                            <TableRow 
                                                numeration={index + 1}
                                                key={row.id} 
                                                row={row}
                                            />
                                        )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>     
                </React.Fragment>
            )
        }
    }

    export default Table;

Answer 1

我認為是因為您忘記了將功能添加到“提交”按鈕：

<button type="submit" onSubmit={this.submitHandler.bind(this)}>
  Search 
</button>