React-Tutorial/forms.html at main · BYU-CS-260/React-Tutorial · 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
28
29
30
31
32
33
34
35
36
37
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

    function NameForm() {
    const [state, setState] = React.useState('');

    function handleChange(event) {
        setState(event.target.value);
    }

    function handleSubmit(event) {
        alert('A name was submitted: ' + state);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit}>
        <label>
            Name:
            <input type="text" value={state} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
        </form>
    );
    }
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<NameForm />);
    </script>
  </body>
</html>