在React.js中处理表单
与其他库（例如angular）不同，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>
);
}
}导出默认的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'));