React中文文档之Forms

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)，实现输入表单的一种替代技术

React中文文档之Forms相关推荐

react中文文档、英文文档及JavaScript相关文档及web前端相关资料
一. react中文文档 https://doc.react-china.org 二. react英文文档 https://reactjs.org 三.react Github https://git ...
React中文文档之Thinking in React
Thinking in React - 思考React 在我们看来,React是使用js来创建大的.速度快的web应用的首选方式.它已经在Facebook和Instagram表现的非常好. React ...
React中文文档之Handling Events
Handling Events - 事件处理 React元素的事件处理同DOM元素的事件处理非常相似. 有一些语法不同: 1.React事件使用 'camelCase-驼峰式' 命名,而不是 'low ...
React中文文档之Conditional Rendering
Conditional Rendering - 有条件的渲染在React中,你可以创建唯一的组件,来封装你需要的行为.之后,你可以仅仅渲染它们中的一些,这取决于你应用的状态. React中的有条件的 ...
React中文文档之introducing JSX
introducing JSX 思考下面的变量声明: const element = <h1>Hello world!</h1>; 这个有趣的标签解析,既不是字符串,也不是HT ...
React中文文档之State and Lifecycle
state 和生命周期到目前为止,我们仅仅学习了一种方式来更新UI. 我们调用 'ReactDOM.render()' 来改变输出渲染: function tick() {const elemen ...
React中文文档之Rendering Elements
Rendering Elements - 渲染元素元素是React应用的最小构建块一个元素描述了你想要在屏幕上看到的内容: const element = <h1>Hello, wor ...
React中文文档 8. 列表 Key
1.遍历 const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =><li>{number}& ...
React中文文档之Components and Props
Components and Props - 组件和属性组件允许你分隔UI为独立的.可重用的零件,每个零件是隔离的. 概念上,组件就像js的函数.它们接收任意的输入(被称为 'props'),并返回 ...

React中文文档之Forms

React中文文档之Forms相关推荐

最新文章

热门文章