Javascript 反应-Internet explorer 11输入在第一次更改后失去焦点

我遇到了一个非常奇怪的问题，我无法理解。 我目前正在使用react 16.3和Antd 3.11框架使用create react应用程序，并且我已经创建了一个表，该表在其标题列中呈现附加了onChange事件的组件

当我第一次关注输入时，问题就出现了

我在第一个关键事件上失去了焦点，之后当我再次单击该字段时，它将保持焦点，直到我单击其他内容

以下是我一直在使用的示例：

以及下面的代码

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);

快速总结我所理解的事情

• 该表重新启动filterDropDown道具，filterIcon在每个 击键
• 表所在的类组件不会重新加载或删除 触发器（组件更新）
• 这在Chrome、FireFox和Edge中都能很好地工作，示例在 在antds网站上发布IE11。但我的应用程序中没有
• 在我自己的组件中呈现的所有antd字段和常规字段在任何浏览器中都没有此问题
• 在渲染函数外部渲染输入组件不会 工作，因为它不是我的组件，它是表组件触发自己的更新事件
• 我还尝试将-ms user select:settings更改为不同的属性，以查看是否有影响的天气。事实是，这只会让事情变得更糟
• 我曾尝试将输入值设置为状态值，以使其成为受控组件，但当componentDidUpdate触发时，我通过编程进行设置。关注我的输入，它会设置caretIndex lenght-1，而不是在文本后面。（我已手动尝试覆盖selectionStart和SelectionEnd，但未成功

我已经没有什么想法了，因为我已经了解到，其他一些组件正在窃取我输入框的焦点，但是即使我使用了 我能想到的几乎每个方法和生命周期事件中都有document.activeElement。所有事件都指向具有焦点的“a”输入字段（不确定这是创建的旧字段还是新字段，但我认为它是旧字段）

我已经尽了最大努力来解释我的情况，我希望世界上有人遇到过类似的问题

更新：

---

antd合理地更改了他们的表组件，因此网页上的示例略有不同，但问题仍然是一样的。

我在IE11上也有同样的行为

可以通过在输入字段上添加一个onBlur来修复它，这只是将焦点设置为currentTarget

onBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
    e.currentTarget.focus();
};

onBlurHandler=（e:React.FocusEvent）=>{
e、 currentTarget.focus（）；
};

我建议以这种方式重新创建，这样用户就可以自己重新创建问题。CodeSandBox无法在internet explorer中显示示例。浪费时间。stackblitz、plnkr、repl等如何。Phix我将对此进行检查。谢谢你们的建议。仍然没有答案吗？

onBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
    e.currentTarget.focus();
};