javascript - ReactJS：来自道具的onClick函数不适用于li元素

Question

您好，我通过道具将 onLocationSelect 函数传递给名为“DropDownSearch”的组件，但是每当我尝试单击 li 元素时，onLocationSelect 不会被调用...

li 元素中的 div 在某种意义上是否会“覆盖” li 元素不被点击？还是这里有不同的错误？

// CreateGame.js

onLocationSelect(location) {
    this.setState({ selectedLocation: location });
    console.log(location);
}

render() {
    return (
        <h3>Location</h3>
        <div className="create-game-inputs">
            <DropDownSearch
                fetchYelpBusinesses={yelpSearch}
                location={this.state.location}
                yelpSearchResults={this.props.yelpSearchResults}
                onLocationSelect={this.onLocationSelect}
            />
        </div>
    )

}



// DropDownSearch.js

renderSearchResults(results) {
    return results.map(item => {
        return (
            <li
                name="dds-item"
                key={item.id}
                onClick={() => this.props.onLocationSelect(item)}
            >
                <div className="dds-item-img">
                    <img src={item.image_url} alt={item.name} />
                </div>
                <div className="dds-item-info">
                    <div className="dds-item-name">{item.name}</div>
                    <div className="dds-item-address">
                        {item.location.address1},{item.location.city},
                        {item.location.state}
                    </div>
                </div>
            </li>
        );
    });
}

render() {
    return (
        <div className="dds-search-wrapper">
            <input
                name="searchTerm"
                type="search"
                value={this.state.searchTerm}
                onChange={this.onSearchChange}
                onFocus={this.onSearchFocus}
                onBlur={this.onSearchBlur}
                autoComplete="off"
            />

            {this.props.yelpSearchResults &&
                this.state.listOpen && (
                    <ul className="dds-list">
                        {this.renderSearchResults(
                            this.props.yelpSearchResults
                        )}
                    </ul>
                )}

            <input
                name="location"
                type="search"
                value={this.state.location}
                onChange={this.onLocationChange}
            />
        </div>
    );
}

标签： javascriptreactjslistonclick