Question

我想基于<select>的值呈现DOM元素。我正在将searchby从类传递到<Autosuggest />组件中，该组件根据输入呈现建议。我首先要做的是能够访问searcby

中的getSuggestions

    import React, { Component } from 'react';
    import './Search.css'
    import axios from 'axios';
    import Autosuggest from 'react-autosuggest';

    var books = []

    const getSuggestions = ( value, searchby ) => {
        const inputValue = value.trim().toLowerCase();
        const inputLength = inputValue.length;

        console.log(searchby)
        return inputLength === 0 ? [] : books.filter(book =>
            book.title.toLowerCase().slice(0, inputLength) === inputValue);   
    };

    const getSuggestionValue = suggestion => suggestion.title;

    const renderSuggestion = suggestion => (
        <div>
            {suggestion.title}
        </div>
    );



    class Search extends Component {

        constructor(props) {
            super(props);

            this.state = {
                value: '',
                suggestions: [],
                setOfAllBooks: [],
                searchedBooks: [],
                searchBy: ''
            }
        }

        componentDidMount() {
            axios.get('/api/book/viewAll')
                .then(res => {
                    this.setState({ setOfAllBooks: res.data });
                    books = this.state.setOfAllBooks;
                    console.log(this.state.setOfAllBooks)
                    console.log(books);
                })

                this.setState({ searchBy: 'Title' });
        }

        changeSearchBy = (event) => {
            this.setState({ searchBy: event.target.value })
        }

        onChange = (event, { newValue }) => {
            this.setState({
                value: newValue
            });
        };

        onSuggestionsFetchRequested = ({ value }) => {
            this.setState({
                suggestions: getSuggestions(value)
            });
        };

        onSuggestionsClearRequested = () => {
            this.setState({
                suggestions: []
            });
        }

        searchBook = (event) => {
            event.preventDefault();

            this.setState({ value: this.state.value });

            const searchedBooks = this.state.setOfAllBooks.filter(book => book.title === this.state.value);

            this.props.setTableData(searchedBooks)
            console.log(this.state.setOfAllBooks)
        }


        render() {
            const { value, suggestions } = this.state;
            const { searchby } = this.state.searchBy;

            const inputProps = {
                placeholder: 'Enter the name of the book',
                value,
                onChange: this.onChange,
                className: "form-control",
                type: "text",
                searchby
            }
            return (
                <div>
                    <form>
                        <fieldset>
                            <div className="form-group row d-flex justify-content-center">
                                <div className="form-group col-lg-4">
                                    <label htmlFor="searchBy">Search By</label>
                                    <select className="form-control" id="searchBy" onChange={this.changeSearchBy}>
                                        <option>Title</option>
                                        <option>ISBN</option>
                                        <option>Author</option>
                                    </select>
                                </div>

                                <div className="form-group col-lg-4">
                                    <label htmlFor="searchFor">Search For</label>
                                    <Autosuggest
                                        suggestions={suggestions}
                                        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                                        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                                        getSuggestionValue={getSuggestionValue}
                                        renderSuggestion={renderSuggestion}
                                        inputProps={inputProps}
                                        id="searchFor"     
                                        searchby={searchby}
                                    />
                                </div>

                                    <div className="form-group col-lg-2">
                                        <label htmlFor="searchFor">&nbsp;</label>
                                        <button className="form-control btn btn-success" type="submit" onClick={this.searchBook}>Search</button>
                                    </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            )
        }
    }

    export default Search;

Answer 1

似乎您正在存储searchBy的状态。因此，您可以尝试：

suggestions: getSuggestions(value, this.state.searchBy)

将数据从类传递到类外部的Const函数集

1 个答案: