observeTagsClick(type, text){ // 将选中的标签插入输入行
let pre_text = this.props.getFieldsValue(['inspection']).inspection;
console.log("pre_text",pre_text)
this.setState({ value: text });
if(type === 'add' && text){
// console.log("111",add);
if(pre_text){
if(!pre_text.includes(text)){
var lastChar = pre_text.substr(pre_text.length - 1, 1);
if(lastChar === ',' || lastChar == '。' || lastChar === '、' || lastChar === ';' || lastChar === ',' || lastChar === '.' || lastChar === '/'){
pre_text += text; // 如果最后一个字符包含符号则直接添加字符串
}else{
pre_text += '、' + text;
}
this.props.setFieldsValue({inspection: pre_text});
this.setState({ value: pre_text });
}
}else{
this.props.setFieldsValue({inspection: text});
this.setState({ value: text });
}
}else{
if(pre_text.includes(text) && text){ // 字符串匹配
for(var i=0; i < pre_text.length; i++){
var searchResult = pre_text.startsWith(text, i); // 判断是否存在如果存在
if(searchResult){
pre_text = pre_text.replace(text, '');
if(pre_text[i] === ',' || pre_text[i] == '。' || pre_text[i] === '、' || pre_text[i] === ';' || pre_text[i] === ',' || pre_text[i] === '.' || pre_text[i] === '/'){
let prefix = pre_text.substr(0, i);
pre_text = prefix + pre_text.substr(i+1);
}
let lastChar = pre_text.substr(pre_text.length - 1, 1);
if(lastChar === ',' || lastChar == '。' || lastChar === '、' || lastChar === ';' || lastChar === ',' || lastChar === '.' || lastChar === '/'){ // 最后一个字符不允许是范围内的字符
pre_text = pre_text.substr(0, pre_text.length - 1);
}
this.props.setFieldsValue({inspection: pre_text});
this.setState({ value: pre_text });
}
}
}
根据你提供的代码和问题描述,可以初步判断点击下拉框中的数据插入到行后,数据消失的原因可能是因为触发了页面重载或者组件的状态被重新设置了,导致之前插入的数据被清除或者丢失。为了避免这种情况发生,可以考虑以下两种解决方案:
使用 redux 可以将组件的状态维护在全局 store 中,从而实现状态的统一管理和共享。当插入下拉框中的数据到行后,可以通过 dispatch 触发 action 更新 store 中的状态,从而确保数据不会被清除或者丢失。
组件的生命周期函数比如 componentWillUnmount 可以在组件销毁前执行一些必要的清理工作,比如保存组件的状态等。可以尝试在 componentWillUnmount 中保存当前组件的状态,从而避免组件被重新渲染时状态被清空的问题。另外,在组件重新渲染之前,可以使用 shouldComponentUpdate 钩子函数进行判断,避免不必要的组件渲染,从而提高组件的渲染效率。