react_learn
/
shafish_react_dom.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="react-demos/build/react.development.js"></script>
        <script src="react-demos/build/react-dom.development.js"></script>
        <script src="react-demos/build/babel.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.myTextInput = React.createRef();
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick() {
                this.myTextInput.current.focus();
            }
            render() {
                return (
                <div>
                    <input type="text" ref={this.myTextInput} />
                    <input type="button" value="Focus the text input" onClick={this.handleClick} />
                </div>
                );
            }
        }
        ReactDOM.render(
            <MyComponent />,
            document.getElementById('example')
        );
        </script>
      </body>
</html>