HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。
在HTML当中,想,
一个简单的实例
在实例中我们设置了输入框input值value={this.state.data}。在输入框发生变化时我们可以更新state.我们可以使用onChange事件来监听input的变化,并修改state.
1 | class HelloMessage extends React.Component{ |
上面代码将要渲染出一个值为Hello Runoob!的input元素,并且通过onChange事件响应更新用户输入的值。
实例2
在以下实例中我们将为大家演示如何在子组件上使用表单,onChange方法将触发state的更新并将更新的值传递到子组件的输入框的value上来重新渲染界面。
你需要在父组件通过创建事件句柄(handleChange),并作为prop(updateStateProp)传递到你的子组件上。
1 | <!DOCTYPE html> |
Select下拉菜单
在React中,不适用selected属性,而在根select标签上用value属性来表示选中项。
1 | class FlavorForm extends React.Component{ |
多个表单
当你有处理多个 input 元素时,你可以通过给每个元素添加一个 name 属性,来让处理函数根据 event.target.name 的值来选择做什么。
1 | class Reservation extends React.Component { |
React 事件
1 | class HelloMessage extends React.Component { |
当你需要从子组件中更新父组件的 state 时,你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。实例如下:
1 | class Content extends React.Component { |