react_materials/17_basic_forms.html at master · neethu-satheesh/react_materials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>

<script type="text/babel">

    const App = () => {
        const submitHandler = (event) => {
            event.preventDefault()
            console.log(event.target.elements.userName.value)
            alert(`Hi ${event.target.userName.value} `)
        }
        return (
            <form onSubmit={submitHandler}>
                <p><label htmlFor="userName">Name</label></p>
                <p><input id="userName"/></p>
                <p><button type="Submit">Submit</button></p>
            </form>
        )
    }
    const renderApp = () => ReactDOM.render(<App />, document.getElementById("root"))
    renderApp()
</script>

<body>
    <div id="root"></div>
</body>