Question

我正在开发一个插件来通过弹性搜索搜索街道，好吗？

我有一个数据列表，显示我的选择选项。当我从数据库收到信息时，我将创建所有html选项elemtns并添加click事件以捕获和处理。

但是我不知道为什么我添加到每个选项元素的onClick事件不起作用。

这是我的代码已编辑：

render() {
    const { value, streets, error, labelError } = this.state;
    return (
        <div className="w-100 d-flex flex-column">
            <div className="plug-search plug-search__content">
                <div className="plug-inner-addon">
                    <input onKeyDown={this.handlePressEnter.bind(this)} onChange={this.handleSearch.bind(this)} type="text" placeholder={PLACEHOLDER} value={value} list="streets" autoComplete="on" />
                    <datalist id="streets">
                        { streets && streets.length > 0 && streets.map((street, index) => {
                            return (
                                <Item street={street} position={index} key={index} />
                            );
                        })}
                    </datalist>
                </div>
                <div className="plug-btn-search plug-btn-search__content">
                    <i onClick={this.handleGetGeometry} className={`icon-search plug-search-icon`}></i>
                </div>
            </div>
            {error &&
                <div className={`plug-error plug-error__content ${(error) ? 'slideDown' : 'slideUp'}`}>
                    <label className="plug-label">{labelError}</label>
                </div>
            }
        </div>
    );
}

现在，我已经创建了一个Item组件，但是仍然无法正常工作：

class Item extends Component {

    clickedOption = (event, index) => {
        console.log('clicked');
        console.log('value: ', event.target.value);
        console.log('index: ', index);
    };

    render() {
        return (
            <div className="option" onClick={(event) => this.clickedOption(event, this.props.position)}>
                <option value={this.props.street.nombre} />
            </div>
        )
    }
}

export default Item;

Answer 1

当前，<datalist />在他的onClick中不支持<options />个事件，您可能会看到this个问题，以便在这种情况下应用选项。希望有帮助。

Answer 2

感谢Alberto Perez

已解决：

clickedOption = (event) => {
    console.log('clicked');
    console.log('value: ', event.target.value);
};

render() {
    const { value, streets, error, labelError } = this.state;
    return (
        <div className="w-100 d-flex flex-column">
            <div className="plug-search plug-search__content">
                <div className="plug-inner-addon">
                    <input onInput={this.clickedOption} onChange={this.handleSearch.bind(this)} type="text" placeholder={PLACEHOLDER} value={value} list="streets" autoComplete="on" />
                    <datalist id="streets">
                        { streets && streets.length > 0 && streets.map((street, index) => {
                            return (
                                <option value={street.nombre} key={index} />
                            );
                        })}
                    </datalist>
                </div>
                <div className="plug-btn-search plug-btn-search__content">
                    <i onClick={this.handleGetGeometry} className={`icon-search plug-search-icon`}></i>
                </div>
            </div>
            {error &&
                <div className={`plug-error plug-error__content ${(error) ? 'slideDown' : 'slideUp'}`}>
                    <label className="plug-label">{labelError}</label>
                </div>
            }
        </div>
    );
}

Answer 3

handleSearch = (e) => {
        this.setState({
            value: e.target.value
        })
    }

render() {
    const { value, streets, error, labelError } = this.state;
    return (
        <div className="w-100 d-flex flex-column">
    <div className="plug-search plug-search__content">
        <div className="plug-inner-addon">
            <input onKeyDown={this.handlePressEnter.bind(this)} onChange={this.handleSearch.bind(this)} type="text" placeholder={"placeholder"} value={value} list="streets" autoComplete="on" />
            <datalist id="streets">
                { streets && streets.length > 0 && streets.map((street, index) => {
                return (
                <div key={index} className="option">
                    <option value={street.nombre} />
                </div>

                );
                })}
            </datalist>
        </div>
        <div className="plug-btn-search plug-btn-search__content">
            <i onClick={this.handleGetGeometry} className={`icon-search plug-search-icon`}></i>
        </div>
    </div>
    {error &&
    <div className={`plug-error plug-error__content ${(error) ? 'slideDown' : 'slideUp' }`}>
        <label className="plug-label">{labelError}</label>
    </div>
    }
</div>   
);
}

为什么不工作onClick on选项元素

3 个答案: