在打造search组件时会经常使用到input组件，但这有一个就是当用户输入拼音时便触发搜索功能有时候这并不是我们想要的。

假入有如下Input组件

import React, { Component } from "react";export default class Input extends Component {onChange = (e) => {this.props.onChange(e.target.value);};render() {const { value } = this.props;return (<divstyle={{border: "2px solid blue",padding: "10px",}}><h3>input组件</h3><input onChange={this.onChange} value={value} /></div>);}
}

有如下search组件

import React, { useState } from "react";
import Input from "./Input";function Search() {const [value, setValue] = useState("");return (<><h2>Search组件</h2><Input onChange={setValue} value={value} /><div style={{ marginTop: "100px" }}>{value}</div></>);
}export default Search;

运行结果如下

很明显输入的拼音也别带过来了，这样就会触发搜索

compositionstart，compositionend

这时候就需要引入我们的 compositionstart，compositionend，这两个都是input身上的函数，可以理解为其身上的生命周期函数，会在新的输入合成时调用，详细可在百度上自己查询。我只需要在外部定义一个变量用于监听输入的状态，在我输入拼音时为false输入完成变为true。
修改Input组件后代码
写完代码再到浏览器查看居然连拼音都输入不了了！！！

如何解决

为什么会出现这种情况？？？
因为我们input的value值依赖于props中的value，我们禁止了拼音的输入导致input接收不到拼音也就无法显示了。

思路：

在state中设置一个临时变量用于显示用户的输入，而传输给Search组件的是没有拼音的部分，这个临时变量在用户拼音输入完成时和用户在search中的输入保持一致，这时候就需要getDerivedStateFromProps这个生命周期函数来控制state中的value。修改后的Input组件代码如下：

import React, { Component } from "react";export default class Input extends Component {static getDerivedStateFromProps(props, state) {if (props.value !== state.prevPropsValue) {return {value: props.value,prevPropsValue: props.value,};}return null;}static flag = true;state = {value: this.props.value,prevPropsValue: this.props.value,};onChange = (e) => {if (this.flag) {this.props.onChange(e.target.value);} else {this.setState({value: e.target.value,});}};onCompositionStart = () => {this.flag = false;};onCompositionEnd = (e) => {this.flag = true;this.props.onChange(e.target.value);};render() {return (<divstyle={{border: "2px solid blue",padding: "10px",}}><h3>input组件</h3><inputonChange={this.onChange}value={this.state.value}onCompositionStart={this.onCompositionStart}onCompositionEnd={this.onCompositionEnd}/></div>);}
}

最终结果如下

如果有问题欢迎指出

React组件Input输入拼音时触发搜索的解决方案相关推荐

如何避免输入中文拼音时触发input事件?
如何避免输入中文拼音时触发input时间 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
处理打拼音时触发input事件bug
1 /* 处理预输入,例如输入中文汉字时,拼音的预加载不触发输入事件*/ 2 var cpLock = false; 3 /* 添加搜索延迟*/ 4 var timeoutId = 0; 5 6 /* ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
input输入中文时，拼音在输入框内会触发input事件的问题
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需求:选词完成后触发input事件,只触发一次. 解决办法: 通过查 ...
【react】解决在外部设置react组件input的value问题
背景: 为了快速输入账号,密码,写了一个插件,但由于输入部分用了antd,改变value并不能通过校验. 解决思路: 能否模拟用户键盘输入,这样避免直接设置value校验不通过的问题. 找到的办法: ...
JavaScript jq 三位分节法 input输入数字时每3位使用逗号隔开
可只用于整数与小数. 效果演示: html 部分: <body><input type="text" id="lname"/> < ...
input文本框实现输入英文时自动触发事件,输入中文时要输入完成后才触发事件
需求: 英文(英文输入法): 每输入一个字母都触发一次事件; 中文(拼音输入法): 输入完成后才触发事件,不是每打一个拼音就触发实现: $(function(){var flag = true;$( ...
react根据中文获取拼音_解决 React 中的 input 输入框在中文输入法下的 bug
以下会涉及到的技术点:react mobx compositionstart compositionupdate compositionend 问题描述在使用 input 时,通常会对输入的内容做校 ...
react下将输入的汉字转化为拼音
1.首先需要一个简单的拼音和汉字对应的字典文件: /** * 收录常用汉字6763个,不支持声调,支持多音字,并按照汉字使用频率由低到高排序 */ var pinyin_dict_notone = { ...
解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...

React组件Input输入拼音时触发搜索的解决方案

compositionstart，compositionend

如何解决

思路：

最终结果如下

如果有问题欢迎指出

React组件Input输入拼音时触发搜索的解决方案相关推荐

最新文章

热门文章

React组件Input输入拼音时触发搜索的解决方案

compositionstart，compositionend

如何解决

思路：

最终结果如下

如果有问题欢迎指出 insertAdIfNeeded();

React组件Input输入拼音时触发搜索的解决方案相关推荐

最新文章

热门文章

如果有问题欢迎指出