Question

我有一个基本的输入元素，希望它允许用户输入大写字母以及小写字母。但是，此输入元素仅允许用户输入小写字母。

下面是代码，

search_change = (event) => {
    const query = event.target.value.toLowerCase();
    this.setState({
        search_query: query,
    });
};


<Input
          icon={<Svg width="24" height="24"/>}
          value={state.search_query}
          onChange={this.search_change}
          name="search_query" type="text" placeholder="Search..."/>

这里输入是组件，下面是输入组件的代码。

 handle_input_change = (event) => {
    this.props.onChange(event);
    this.setState({input_value: event.target.value});
};

return (
        <div className={'input'}>
            <div>
                {React.cloneElement(icon, {
                    onClick: this.icon_click,
                })}
            </div>
            <input {...rest}
                onChange={this.input_change}
                ref={this.input_ref}/>
            {(this.state.input_value.length > 0) && <div 
                className="close_icon_wrapper">
                <Svg width="28" height="28" onClick={this.icon_click}/>
            </div>}
        </div>
    );

有人可以让我知道输入元素不接受用户的大写字母并帮助我解决此问题的可能情况。谢谢。

Answer 1

默认情况下没有此类情况。

防止输入某些字符的逻辑可能在于onChange事件处理程序，该事件处理程序在用户每次更改输入字段中的文本时都会触发。

看看您的this.input_change方法。

Answer 2

我根据谢尔盖·基里连科的答案找到了我问题的答案。基本上，在使用查询进行实际过滤之前，我先将search_query转换为小写。

根据给定的代码，在方法search_change（）中，我将搜索查询更改为小写，如下所示，

const query = event.target.value.toLowerCase();

所以我像这样替换了它 const query = event.target.value;

为了同时以大写和小写形式过滤数据，在实际搜索方法中将查询转换为小写。

search = (query, items) => {
    if (!query) {
        return items;
    }
    query = query.toLowerCase();
    /* perform other operations*/
}

输入元素不接受大写字母

2 个答案: