Question

使用React组件时， svg 文本元素的 tabIndex 在IE11和Edge中不起作用。

我希望使用React组件对svg中的文本元素执行 keypress 事件。在chrome和FF中，这似乎工作正常，但对于IE11和Edge来说却失败。

由于某种原因，当在react的jsx中进行设置时，IE中不会处理 tabIndex 属性，从而导致svg的文本无法进行按键操作。

<html>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {

    doSomething() {
        alert("Keypress captured");
    }

    render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                <text fill="#273039" fontSize="25" width="150" tabIndex="0" onKeyPress={this.doSomething}>
                    <tspan>Type something here!</tspan>
                </text>
            </svg>
        </div>
        );
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>
</html>

这里是在chrome和IE中尝试的示例： https://jsfiddle.net/pabloherre/nou8rc4e

你们对此有任何解决方法吗？或似乎是一个错误？

Answer 1

您可以在focusable="true"标签中添加<text>。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
        class Greeting extends React.Component {

        doSomething() {
        alert("Keypress captured");
        }

        render() {
        return (
        <div>
            <svg viewBox="0 -20 800 300">
                    <text fill="#273039" fontSize="25" width="150" tabIndex="0" focusable="true" onKeyPress={this.doSomething}>
                        <tspan>Type something here!</tspan>
                    </text>
            </svg>
        </div>
        );
        }
        }
        ReactDOM.render(
        <Greeting />,
        document.getElementById('root')
        );
    </script>

SVG的tabIndex在IE和React中不起作用

1 个答案: