Question

我正在制作一个搜索栏，允许用户在键入内容时过滤他们要查找的地点的名称，从而使他们更容易（通过缩小选择范围）来选择自己的地点所需的选择。

但是由于某种原因，我在下面的浏览器中遇到了错误。

我的代码在做什么错，我该如何解决？

void *

浏览器错误：

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;

Answer 1

使用字符串引用时，该引用位于名为refs的对象中，而不是ref，因此您应该像this.refs.search.focus();那样访问它

但是，如果您使用的是16.3.0版或更高版本，则必须使用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>
        );
    }
}

为什么我的搜索栏及其功能无法显示/工作？

1 个答案: