資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時尚研究
法律處理 React.js 中的表單
與 Angle 等其他庫不同，在 React 中，表單需要我們自己處理。React 中有兩種型別的表單輸入
- 受控輸入
- 不受控輸入
受控元件或元素是指由 React 函式處理的元素。示例是在呼叫 onChange 函式時更新欄位。大多陣列件都以受控的方式處理。
受控表單元件示例
import React, { Component } from 'react';
class ControlledFormExample extends Component {
constructor () {
this.state = {
email: ''
}
}
changeEmailHandler = event => {
this.setState({
email: event.target.value
});
}
render () {
return (
<form>
<input type="email"
name="email"
value={this.state.email}
onChange={this.changeEmailHandler}
/>
</form>
);
}
}export default ControlledFormExample
每當電子郵件輸入欄位發生變化時，我們都會更新狀態。
如果表單中有多個欄位，我們可以像下面這樣用一個函式處理所有欄位的 onChange −
handleChange(evt) {
this.setState({ [evt.target.name]: evt.target.value });
}在上面的常見狀態更新中，我們應擁有相同的欄位名稱和狀態變數名稱。
不受控元件通常由 DOM 處理。我們使用 ref 來保留對元素的引用，並在提交操作中處理元素。
展示如何不受控地處理元素的示例。
submitDataHandler = event => {
event.preventDefault();
console.log(this.refs.nameRef.value); //will give us the name value
}
render() {
return (
<div>
<form onSubmit={this.submitDataHandler}>
<div>
<input type="text" name="name" ref="nameRef" />
</div>
</form>
</div>
);
}我們必須在不受控元件中提取欄位值來操作或處理提交。
我們可以新增自定義驗證並向用戶顯示反饋。
import React, { Component} from 'react';
class FormExample extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
id: null,
errormessage: ''
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
let err = '';
if (nam === "id") {
if (val !="" && !Number(val)) {
err = <strong>Your id must be a number</strong>;
}
}
this.setState({errormessage: err});
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.id}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your id:</p>
<input
type='text'
name='id'
onChange={this.myChangeHandler}
/>
{this.state.errormessage}
</form>
);
}
}
ReactDOM.render(<FormExample />, document.getElementById('root'));textarea 的值透過其上的 value 屬性獲取。
<textarea value={this.state.myText} />
class FormExample extends React.Component {
constructor(props) {
super(props);
this.state = {
myText: 'The content of textarea'
};
}
render() {
return (
<form>
<textarea value={this.state.myText} />
</form>
);
}
}
ReactDOM.render(<FormExample />, document.getElementById('root'));
更新於：04-Sep-2019
458 檢視
廣告