學習React(18) - Form表單的運用

做網頁，大部分情況下是離不開表單的運用。現在，就把如何用react來表示表單。
在src文件夾下創建一個文件：

// Formstyle.js 文件
import React, { Component } from 'react'

class Formstyle extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             username: '',
             comments: '',
             topic: 'react'
        }
    }
    
    handleUsernameChange = event => {
        this.setState({
            username: event.target.value
        })
    }

    handleCommentChange = event => {
        this.setState({
            comments: event.target.value
        })
    }

    handleTopicChange = event => {
        this.setState({
            topic: event.target.value
        })
    }

    handleSubmit = event => {
        alert(`${this.state.username} ${this.state.comments} ${this.state.topic}`)
        // 這個加了是爲了當提交表格之後，就能保留表格信息還在表單中
        // 如果想不保留這個表格中的信息，那麼就可以不用下面的一句
        event.preventDefault()
    }

    render() {
        const {username, comments, topic} = this.state
        return (
            <form onSubmit={this.handleSubmit}>
                <div>
                    <label>Username: </label>
                    <input type="text" 
                           // 也可以這麼寫，前提是沒有const在前面定義，value={this.state.username} 
                           value={username} 
                           onChange={this.handleUsernameChange}
                    />
                </div>

                <div>
                    <label>Comments: </label>
                    <textarea 
                        // 也可以這麼寫，前提是沒有const在前面定義，value={this.state.comments} 
                        value={comments}
                        onChange={this.handleCommentChange}>

                    </textarea>
                </div>

                <div>
                    <label>Topic</label>
                    <select 
                        // 也可以這麼寫，前提是沒有const在前面定義，value={this.state.topic} 
                        value={topic}
                        onChange={this.handleTopicChange}
                    >
                        <option value="react">React</option>
                        <option value="angular">Angular</option>
                        <option value="Vue">Vue</option>
                    </select>
                </div>
                
                <button type="submit">Submit</button>
            </form>
        )
    }
}

export default Formstyle

在App.js文件中：

// App.js 文件
import React from 'react';
import './App.css';
import Formstyle from './Formstyle'

function App() {
  return (
    <div className="App">
      <Formstyle/>
    </div>
  );
}

export default App;

結果如下：

博主我在表單裏隨便輸入內容，之後按“submit" 按鈕。

當按了ok按鈕之後，就能保留表單中的內容，這個就是因爲這行代碼：
event.preventDefault()

如果覺得寫的不錯的話，就給個讚唄！