資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中使用表單
在簡單的 HTML 表單中，表單元素會在內部保留其值，並在提交表單按鈕點選時提交。
示例
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
在上面的示例中，我們有一個名為 username 的簡單輸入，我們可以在表單提交時接收其值。HTML 表單的預設行為是導航到新頁面，即表單提交後的頁面。
但是，如果我們有一個表單提交處理程式 JavaScript 函式，它也可以驗證表單資料，則可以獲得更多優勢。驗證將向用戶提供相關反饋。
React 有一種處理表單提交的技術，稱為受控元件。
與 HTML 中一樣，input、textarea 等元素會保留自己的狀態並根據使用者操作進行更新。在 React 中，可變欄位與狀態物件一起保留。
使用 React 受控元件方法處理 username 欄位 -
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}這裡我們有一個 onChange 處理程式函式，用於更新狀態欄位 username。
在 formSubmit 中，我們只是在瀏覽器中顯示控制檯日誌以顯示提交的使用者姓名。
其他受控型別的元件包括 textarea、select 標籤、單選按鈕等。
也有一些不受控的元件，例如檔案型別，它們本質上是隻讀的，並且僅在表單提交時獲取其值。
使用單個 JS 函式處理多個表單輸入 -
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}應避免使用空值的受控輸入欄位，可以透過使用狀態初始化為欄位提供預設值來避免。
對於 React 中表單處理的完整解決方案，可以使用像 formik 這樣的第三方庫。它易於使用驗證、向用戶提供反饋等等。
更新於: 2019年8月28日
312 次瀏覽
廣告