為什么我的搜索欄及其功能無法顯示/工作？

Question

我正在制作一個搜索欄，允許用戶在鍵入內容時過濾他們要查找的地點的名稱，從而使他們更容易（通過縮小選擇范圍）來選擇所需的選項。

但是由於某種原因，我在下面的瀏覽器中遇到了錯誤。

我的代碼在做什么錯，我該如何解決？

import React, { Component } from 'react';

let places = [
    {
        name: "something",
        location: "somewhere"
    },

    {
        name: "something2",
        location: "somewhere3"
    },

    {
        name: "something3",
        location: "somewhere4"
    },
];

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: "",
            places: []
        };

        this.handleChange = this.handleChange.bind(this);
    };

    componentDidMount() {
        this.setState({
            places: places
        });
        this.ref.search.focus();
    }

    handleChange() {
        this.setState({
           searchString: this.refs.search.value
        });
    }

    render() {
        let _places = this.state.places;
        let search = this.state.searchString.trim().toLowerCase();

        if(search.length > 0) {
            _places = _places.filter(function(places) {
                return places.name.toLowerCase().match(search);
            });
        }

        return(
            <div>
                <input
                    type="text"
                    value={this.state.searchString}
                    ref="search"
                    onChange={this.handleChange}
                />

                {
                    places.map(l => {
                        return(
                            <li>
                                {l.name} {l.location}
                            </li>
                        );
                    })
                }
            </div>
        );
    }
}

export default Search;

瀏覽器錯誤：

TypeError: Cannot read property 'search' of undefined

  38 |     this.setState({
  39 |         places: places
  40 |     });
> 41 |     this.ref.search.focus();
  42 | }
  43 | 
  44 | handleChange() { 

Answer 1

使用字符串refs時，ref可以在名為refs的對象中使用，而不能在ref ，因此您應該像這樣訪問它this.refs.search.focus();

不過，如果您使用的是React.createRef版或更高版本，則必須使用React.createRef或更高版本，否則請使用callback refs

使用createRef

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: "",
            places: []
        };
        this.search = React.createRef();
        this.handleChange = this.handleChange.bind(this);
    };

    componentDidMount() {
        this.setState({
            places: places
        });
        this.search.current.focus();
    }

    handleChange() {
        this.setState({
           searchString: this.search.current.value
        });
    }

    render() {
        let _places = this.state.places;
        let search = this.state.searchString.trim().toLowerCase();

        if(search.length > 0) {
            _places = _places.filter(function(places) {
                return places.name.toLowerCase().match(search);
            });
        }

        return(
            <div>
                <input
                    type="text"
                    value={this.state.searchString}
                    ref={this.search}
                    onChange={this.handleChange}
                />

                {
                    places.map(l => {
                        return(
                            <li>
                                {l.name} {l.location}
                            </li>
                        );
                    })
                }
            </div>
        );
    }
}

使用回調引用

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: "",
            places: []
        };

        this.handleChange = this.handleChange.bind(this);
    };

    componentDidMount() {
        this.setState({
            places: places
        });
        this.search.focus();
    }

    handleChange() {
        this.setState({
           searchString: this.search.value
        });
    }

    render() {
        let _places = this.state.places;
        let search = this.state.searchString.trim().toLowerCase();

        if(search.length > 0) {
            _places = _places.filter(function(places) {
                return places.name.toLowerCase().match(search);
            });
        }

        return(
            <div>
                <input
                    type="text"
                    value={this.state.searchString}
                    ref={(ref) => this.search = ref}
                    onChange={this.handleChange}
                />

                {
                    places.map(l => {
                        return(
                            <li>
                                {l.name} {l.location}
                            </li>
                        );
                    })
                }
            </div>
        );
    }
}