Я столкнулся с очень странной проблемой, которую не могу обернуть.В настоящее время я работаю с приложением create-Reaction-app, использующим реагирующие среды 16.3 и Antd 3.11, и создал таблицу, в которой внутри столбца заголовка отображается компонент с вложенным событием 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, и пример работаетв IE11 на веб-сайте antds.однако не в моем приложении.
- Все поля antd и обычные поля, которые отображаются в моих собственных компонентах, не имеют этой проблемы ни в одном браузере.
- Рендеринг компонентов ввода вне функции рендеринга неработать, так как не мой компонент выполняет рендеринг, а компонент таблицы, запускающий собственные события обновления
- Я также пытался изменить -ms-user-select: настройки на разные атрибуты, чтобы увидеть погоду, которая оказала влияниеили нет.дело в том, что это только усугубило ситуацию.
- Я пытался установить входное значение в качестве значения состояния, чтобы сделать его управляемым компонентом, однако, когда componentDidUpdate срабатывает, и я программно устанавливаю .focus на свой ввод, он устанавливает значение caretIndex lenght-1 вместо текста.(Я пытался вручную переопределить selectionStart и SelectionEnd, но безуспешно
У меня как будто заканчиваются идеи, так как я понял, что какой-то другой компонент крадет фокус моего вводано я не смог найти элемент, хотя я использовал document.activeElement почти во всех методах и событиях жизненного цикла, о которых я мог подумать. Все события указывают на поле ввода «a», имеющее фокус (не уверен, что этоэто старый или новый, но я думаю, что он старый).
Я изо всех сил пытался объяснить свой сценарий, и я надеюсь, что кто-то в мире сталкивался с подобной проблемой.
ОБНОВЛЕНИЕ : antd разумно изменил свой компонент таблицы, так что пример немного отличается на веб-странице, однако проблема остается прежней.