javascript - React - Internet Explorer 11 输入在第一次 onchange 后失去焦点
问题描述
我遇到了一个非常奇怪的问题,我无法解决。我目前正在使用 react 16.3 和 Antd 3.11 框架使用 create-react-app,并且我创建了一个表,该表在其标题列内呈现一个附加了 onChange 事件的组件。
当我第一次关注输入时,问题就出现了。
我失去了对第一个关键事件的关注,然后当我再次单击该字段时,它仍然保持焦点,直到我单击其他内容。
这是我一直在使用的示例: https ://ant.design/components/table/
和下面的代码。
import {
Table, Input, Button, Icon,
} from 'antd';
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
class App extends React.Component {
state = {
searchText: '',
};
handleSearch = (selectedKeys, confirm) => () => {
confirm();
this.setState({ searchText: selectedKeys[0] });
}
handleReset = clearFilters => () => {
clearFilters();
this.setState({ searchText: '' });
}
render() {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: ({
setSelectedKeys, selectedKeys, confirm, clearFilters,
}) => (
<div className="custom-filter-dropdown">
<Input
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={this.handleSearch(selectedKeys, confirm)}
/>
<Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
<Button onClick={this.handleReset(clearFilters)}>Reset</Button>
</div>
),
filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
setTimeout(() => {
this.searchInput.focus();
});
}
},
render: (text) => {
const { searchText } = this.state;
return searchText ? (
<span>
{text.split(new RegExp(`(${searchText})`, 'gi')).map((fragment, i) => (
fragment.toLowerCase() === searchText.toLowerCase()
? <span key={i} className="highlight">{fragment}</span> : fragment // eslint-disable-line
))}
</span>
) : text;
},
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
onFilter: (value, record) => record.address.indexOf(value) === 0,
}];
return <Table columns={columns} dataSource={data} />;
}
}
ReactDOM.render(<App />, mountNode);
以及随之而来的css:
.custom-filter-dropdown {
padding: 8px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.custom-filter-dropdown input {
width: 130px;
margin-right: 8px;
}
.custom-filter-dropdown button {
margin-right: 8px;
}
.highlight {
color: #f50;
}
快速总结一下我已经理解的事情。
- 该表在每次击键时重新呈现 filterDropDown 道具 filterIcon。
- 表所在的类组件不会重新渲染或触发(componentDidUpdate)
- 这在 Chrome、FireFox、Edge 中完美运行,并且该示例在 antds 网站上的 IE11 中运行。但不在我的应用程序中。
- 在我自己的组件中渲染的所有 antd 字段和常规字段在任何浏览器中都没有这个问题。
- 在渲染函数之外渲染输入组件不起作用,因为不是我的组件重新渲染它是触发它自己的更新事件的表组件
- 我还尝试将 -ms-user-select: 设置更改为不同的属性,以查看是否有影响的天气。事实上,它只会让情况变得更糟。
- 我尝试将输入值设置为状态值以使其成为受控组件,但是当 componentDidUpdate 触发并且我以编程方式将 .focus 设置在我的输入上时,它会设置 caretIndex lenght-1 而不是文本后面。(我手动尝试覆盖 selectionStart 和 SelectionEnd 但没有成功
我有点想不通了,因为我了解到其他一些组件正在窃取我输入框的焦点,但是即使我使用了 document.activeElement ,我也无法找到该元素几乎所有我能想到的方法和生命周期事件。所有事件都指向具有焦点的“a”输入字段(不确定这是创建的旧的还是新的,但我认为它是旧的)。
我已尽力解释我的情况,我希望世界上有人遇到过类似的问题。
更新:antd 合理地改变了他们的表格组件,所以网页上的例子有点不同,但问题仍然是一样的。
解决方案
我在 IE11 上也有同样的行为。
可以通过在 Input 字段上附加一个 onBlur 来修复它,只需将焦点设置到 currentTarget。
onBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
e.currentTarget.focus();
};
推荐阅读
- maven - 找不到 pom.xml 依赖项和插件
- javascript - 使用没有装饰器的 Schema 时的 Mongoose InjectModel 模型类型
- python - PyModbus RTU 服务器- rtu_framer 不能正确分隔帧
- json - 将 SQL Server 列的内容转换为 JSON 格式
- typescript - 为什么打字稿类型保护在这个例子中不起作用?
- c# - 从 vb.net 或 c# 中的 Web 应用程序打开特定的 Outlook 消息
- c++ - 如何使用 MSBuild 成功构建项目?
- c# - 如何使用 C# 在某些行之间写入文本
- android - 刷新片段的新方法
- python - 如何在整数输入的基础上重复句子?