Forms - 表单 在React中，HTML表单元素同其他DOM元素，有点不同。因为表单元素天生具备一些内部的state状态。例如：下面的HTML表单接收一个名字：
<form>
Name:
<input type="text" name="name" />
<input type="submit" value="submit" />
</form>
这个表单具有默认HTML表单的行为，当用户提交表单，跳转到新页面。在React中，如果你想要这种行为，它默认就起作用。但是大多数情况，使用js函数来处理表单的提交，以及对用户输入的表单数据的访问是很方便的。实现这个目的的标准方式是，使用一个叫做 'controlled components-控制组件' 技术
controlled components - 控制组件
在HTML中，表单元素，例如：<input> <textarea> 以及 <select> 典型的维护自己的state状态，并且基于用户的输入而更新。在React中，多变的state状态保持在 组件的state属性中，并且只能通过 setState() 来更新。
我们可以通过 令React的state状态变为 'single source of truth-但一来源？' 来结合两种方式。之后，渲染表单的React组件，也可控制表单上随后的用户输入。被React以这种方式控制的input表单元素，被称为是：'controlled components-控制组件'。
例如，我们想实现之前的例子，当表单提交时，记录name值，我们可以将表单写作一个控制组件：
Class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
Name:
<input type="text" value={this.state.value}>
<input type="submit" value="Submit">
</form>
);
}
}
由于我们的表单元素设置了 'value' 属性，展示的value值应该是 'this.state.value'来声明React值的真实来源。由于每次敲击键盘，会调用 'handleChange' 来更新React的state，当用户输入时，也会更新展示的值。
对于一个控制组件，每次状态的改变都会引起一个相关的函数调用。这将直接修改或验证用户输入。例如：如果我们想强制输入的名字全部为大写字母，我们可以如下定义 'handleChange'：
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
textarea 标签
在HTML中，'<textarea>' 元素如下定义，文本在它的内部：
<textarea>
Hello there, this is some text in a text area
</textarea>
在React中，一个 '<textarea>' 使用 'value' 属性来替代内部的文本。使用这种方法，'<textarea>' 表单元素，可以写成一个 '行内单标签' 形式：
class EssayForm extends React.component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
Name:
<textarea value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="submit">
</form>
);
}
}
注意：'this.state.value' 在构造器中初始化，确保文本域刚开始有内部一些文本
select 标签
在HTML中，'<select>' 创建一个下拉菜单。例如，下面的HTML代码创建一个 'flavors' 的下拉列表：
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
注意：Coconut 选项是初始选中的，因为设置了 'selected' 属性。React中国年，不使用 'selected' 属性，而使用 'value' 属性在 '<select>' 根标签。在控制组件上，这会更加方便，因为你只需要在一个地方更新它的值。例如：
class FlavorForm extends React.component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
<input type="submit" value="Submit" />
</form>
);
}
}
总的来说，这使得 <input type="text">，<textarea>和<select> 所有都工作的非常相似－它们都接收一个 'value' 属性，可以用来实现一个控制组件。
控制组件的供选方案
有时使用控制组件是乏味的，因为通过React组件，你需要对每一种数据改变方式写一个事件处理，并管道传递(pipe)所有的输入state状态。这是极其厌烦的，当你将一个已经存在的代码转变为React代码，或者使React应用和一个非React库融合。在这些情况下，你可能想要寻求非控制组件(uncontrolled components)，实现输入表单的一种替代技术
转载请注明原文地址: https://ju.6miu.com/read-678759.html
