学习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()

如果觉得写的不错的话，就给个赞呗！