为什么不工作点击选项元素答案

【问题标题】：Why don´´t work onClick on option element为什么不工作点击选项元素
【发布时间】：2019-08-13 08:20:55
【问题描述】：

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

我有一个数据列表来显示我要选择的选项。当我收到来自数据库的信息时，我会创建所有 html 选项 elemtns 并添加点击事件来捕获和处理。

但我不知道为什么我添加到每个选项元素的 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;

【问题讨论】：

您好，为了对您有帮助，能否发一张错误截图？
请在 CodeSandbox 上创建一个示例
最后 react 使用了 DOM。 option 元素没有 onclick 事件。在input 上使用onChange 处理程序来实现您需要的逻辑。
这里是沙盒中的代码：codesandbox.io/embed/suspicious-austin-1kbhb

标签： reactjs

【解决方案1】：

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

【讨论】：

我已经看到使用 onIput 来获取选项值。谢谢

【解决方案2】：

感谢阿尔贝托·佩雷斯

已解决：

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>
    );
}

【讨论】：

【解决方案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>   
);
}

【讨论】：