React-Internet Explorer 11的输入在首次onchange之后失去焦点 [英] React - Internet explorer 11 input loses focus after first onchange

问题描述

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

I have come across a very strange issue that I can't wrap my head around. I'm currently working with an create-react-app using react 16.3 and Antd 3.11 framework and I have created a table which inside it's header column renders a component with an onChange event attached.

当我第一次关注输入时，问题就来了.

The issue comes when I focus the input for the first time.

我失去了对第一个关键事件的关注，然后再次单击该字段时，它将一直保持焦点，直到我单击其他内容为止.

I lose focus on first key event, and afterwards when I click the field again, it remains focused until I click something else.

这是我一直在使用的示例: https://ant.design/components/table/

Here is the example I have been using: 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:

And the css that follows to that:

.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;
}

快速总结一下我已经了解的内容.

To quickly sum up things i've come to understand.

• 该表将在每个位置上释放filterDropDown属性，filterIcon击键.
• 表所在的类组件不会重新呈现或触发器(componentDidUpdate)
• 这在Chrome，FireFox，Edge中完美运行，示例在ants网站上的IE11.但是不在我的应用程序中.
• 在我自己的组件中呈现的所有antd字段和常规字段在任何浏览器中都没有此问题.
• 在渲染功能之外渲染输入组件不会之所以有效，是因为不是由我的组件来提供它，而是由表组件触发了它自己的更新事件
• 我还尝试将-ms-user-select:设置更改为不同的属性，以查看天气是否有效.事实上，这只会使情况变得更糟.
• 我尝试将输入值设置为状态值以使其成为受控组件，但是当componentDidUpdate触发并且以编程方式在我的输入上设置.focus时，它将设置caretIndex lenght-1而不是在文本后面.(我手动尝试覆盖selectionStart和SelectionEnd，但是没有成功

我有点精疲力尽，因为我了解到的是其他一些组件正在窃取我的输入框的焦点，但是即使我已经使用过，我也无法找到该元素我能想到的几乎所有方法和生命周期事件中的document.activeElement.所有事件都指向具有焦点的"a"输入字段(不确定是创建的是旧的还是新的，但是我认为这是旧的).

I'm sort of running out of ideas since what I have come to understand is that some other component is stealing the focus of my input box, however I have not been able to find the element even though I've used document.activeElement in almost every method and lifecycle event I could think of. All events point to the 'a' Input field having focus (not sure if this is the old or new one created, however I think it's the old one).

我尽力解释了我的情况，希望世界上有人遇到类似的问题.

I have tried my best to explain my scenario and I hope someone out there in the world has come across a similar issue.

更新:antd合理地更改了其表组件，因此该示例在网页上有所不同，但是问题仍然相同.

UPDATE: antd reasonly changed their table component so the example is a bit different on the webpage, however issue still remains the same.

推荐答案

我在IE11上也有相同的行为.

I hade the same behavior on IE11.

可以通过在Input字段上附加onBlur来解决此问题，只需将焦点设置为currentTarget.

Could fix it with an additional onBlur on the Input field, that just set the focus to the currentTarget.

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

这篇关于React-Internet Explorer 11的输入在首次onchange之后失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！