做网页，大部分情况下是离不开表单的运用。现在，就把如何用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() 如果觉得写的不错的话，就给个赞呗！
