数据结构
网络
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 查看
广告