React反应表单与事件_前端培训

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

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

一个简单的实例

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

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

实例2

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

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

选择下拉菜单

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

多个表格

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

反应事件

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

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

经验分享 程序员 微信小程序 职场和发展