Skip to content

IE8 下的focus事件支持

Jump to bottom
司徒正美 edited this page Aug 17, 2017 · 1 revision 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type='text/javascript' src="./lib/polyfill.js"></script>
  <script type='text/javascript' src="./dist/ReactIE.js"></script>
  <style>
    .outer {
      border: 1px solid rebeccapurple;
      background: red;
      width: 290px;
      height: 290px;
    }

    .inner {
      border: 1px solid rebeccapurple;
      background: green;
      margin: 40px;
      width: 200px;
      height: 200px;
    }

    .inner2 {
      border: 1px solid rebeccapurple;
      background: blue;
      margin: 40px;
      width: 100px;
      height: 100px;
    }
  </style>
  <script>
  "use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var s;
window.onload = function () {
  var App = function (_React$Component) {
    _inherits(App, _React$Component);

    function App(props) {
      _classCallCheck(this, App);

      var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

      _this.state = { aaa: 111 };return _this;
    }


    App.prototype.render = function render() {
      return React.createElement(
        "div",
        { tabIndex: -1, className: "outer", onFocus: function onFocus() {
            console.log('enter');
          } },
        React.createElement(
          "div",
          { tabIndex: -1, className: "inner", onFocus: function onFocus() {
              console.log('enter2');
            } },
          React.createElement(
            "div",
            { tabIndex: -1, className: "inner2", onFocus: function onFocus() {
                console.log('enter3');
              } },
            this.state.aaa
          )
        )
      );
    };

    return App;
  }(React.Component);

  s = ReactDOM.render(React.createElement(App, null), document.getElementById('example'));console.log(s, 'render');
};

  </script>

</head>

<body>

  <div>开发者工具</div>
  <div id='example'></div>


</body>

</html>

依次打出enter2, enter2, enter

``html

<script type='text/javascript' src="./dist/React.js"></script> <script type='text/javascript' src="./test/react.development.js"></script> <script type='text/javascript' src="./test/react-dom.development.js"></script> 
<script type='text/javascript' src="./lib/babel.js"></script>

    <pre>应该等于
       
      
    </pre>
    <h1 id='root' class="root">

    </h1>
    <script type='text/babel'>
       var container = document.getElementById("example")
        var div = container
        var PropTypes = React.PropTypes
        if(!window.ReactDOM){
          window.ReactDOM = React
        }
        var expect = function(a) {
            return {
                toBe: function(b) {
                    console.log(a,"vs", b, a === b)
                },
                toEqual(b){
                    console.log(a,"vs", b, a +""=== b+"")
                },
                toThrow(b){
                    try{
                        a()
                    }catch(e){
                        console.log(e,"vs", b, e.message +""=== b+"")
                    }
                }
            }
        }

        const Hello = ({ name }) => <h1>Hello {name}!</h1>;
        
        class ShowMyError extends React.Component {
          constructor(props) {
            super(props);
            this.state = { error: false };
          }
        
          componentDidCatch(error, info) {
              console.log(error, info)
            this.setState({ error, info });
          }
        
          render() {
            if (this.state.error) {
              return (
                <div>
                  <h1>
                    Error AGAIN: {this.state.error.toString()}
                  </h1>
                  {this.state.info &&
                    this.state.info.componentStack.split("\n").map(i => {
                      return (
                        <div key={i}>
                          {i}
                        </div>
                      );
                    })}
                </div>
              );
            }
            return this.props.children;
          }
        }
        
        class Broken extends React.Component {
          constructor(props) {
            super(props);
            this.state = { throw: false, count: 0 };
          }
        
          render() {
            if (this.state.throw) {
              throw new Error("YOLO");
            }
        
            return (
              <div>
                <button
                  onClick={e => {
                    this.setState({ throw: true });
                  }}
                >
                  button will render error.
                </button>
        
                <button onClick={e => {
                  this.setState(({ count }) => ({
                    count: count + 1
                  }));
                }}>button will not throw</button>
        
                <div>
                  {"All good here. Count: "}{this.state.count}
                </div>
              </div>
            );
          }
        }
        
        class App extends React.Component {
          render() {
            const styles = {
              fontFamily: "sans-serif",
              textAlign: "center"
            };
            return (
              <div style={styles}>
                <Hello name="ShowMyError" />
                <h2>
                  Start clicking to see some {"\u2728"}magic{"\u2728"}
                </h2>
                <ShowMyError>
                  <Broken />
                </ShowMyError>
              </div>
            );
          }
        }
        
        ReactDOM.render(<App />, document.getElementById("root"));
</script> ```
Clone this wiki locally