layedit 内容变化事件_React反应表单与事件

反应表单与事件

本章节我们将讨论如何在React中使用表单。

HTML表单元素与React中的其他DOM元素有所不同，因为表单元素生来就保留了一些内部状态。

在HTML当中，像<input>，<textarea>，和<select>类别表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能使用setState（）方法进行更新。

一个简单的实例

在实例中我们设置了输入框value = {this.state.data}。在输入框值发生变化时我们可以更新状态。我们可以使用onChangeEvent来监听输入的变化，并修改状态。

类HelloMessage扩展了React 。组件{构造函数（道具）{超级（道具）;这个。状态= {值：'您好，Runoob！' } ;这个。handleChange =此。handleChange 。绑定（这个）;} handleChange （事件）{这个。    setState （{值：事件。目标。值} ）;} render （）{ var value = this 。状态。价值;返回< div > <输入类型= “文本” value = { value } onChange = { this 。handleChange } /> < h4> { value } </ h4 > </ div >;} } ReactDOM 。渲染（< HelloMessage />，文档。的getElementById （'例如' ））;

您好Runoob！的输入元素，并通过onChange事件响应更新用户输入的值。

实例2

在以下实例中我们将为大家演示如何在子组件上使用表单。 的onChange方法将触发状态的更新并将更新的值传递到子组件的输入框的值上来重新渲染界面。

你需要在父组件通过创建事件句柄（handleChange），并作为prop（updateStateProp）传递到你的子组件上。

类Content扩展了React 。组件{ render （）{ return   < div > < input type = “ text ” value = {此。道具。myDataProp } onChange = {此。道具。updateStateProp } /> < h4 > {此。道具。myDataProp } </    h4 > </ div >;} }类HelloMessage延伸阵营。组件{构造函数（道具）{超级（道具）;这个。状态= {值：'您好，Runoob！' } ;这个。handleChange =此。handleChange 。绑定（这个）;}handleChange （事件）{这个。setState （{值：事件。目标。值} ）;} render （）{ var value = this 。状态。价值;返回< div > <内容myDataProp = {值} updateStateProp = {此。handleChange } > </ Content > </ div >;} } ReactDOM 。渲染（< HelloMessage />，文档。的getElementById （'例如' ））;

选择下拉菜单

在React中，不使用selected属性，而在根select标签上用value属性来表示放置项。

多个表格

当您有处理多个输入元素时，您可以通过给每个元素添加一个名称属性，来让处理函数根据event.target.name的值来选择做什么。

反应事件

以下实例演示通过onClick事件来修改数据：

当您需要从子组件中更新父组件的状态时，您需要在父组件通过创建事件句柄（handleChange），并作为prop（updateStateProp）传递到您的子组件上。实例如下：

前端培训