首页 > 其他分享 >好客租房36-表单处理(3受控组件的示例)

好客租房36-表单处理(3受控组件的示例)

时间:2023-03-21 12:32:57浏览次数:56  
标签:checked render 示例 36 value 表单 react state setState


实例

1文本框 富文本框下拉框

2复选框

//导入react
import React from 'react'

import ReactDOM from 'react-dom'
//导入组件

// 约定1:类组件必须以大写字母开头

// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

// 约定3:组件必须提供render方法

// 约定4:render方法必须有返回值

class HelloWorld extends React.Component {
//初始化state

state = {
text: '1',
value:"2",
select:"nan",
checked:true
}
handleChange = (e) => {
this.setState({
txt: e.target.value,
})
}
handleChangeValue = (e) => {
this.setState({
value: e.target.value,
})
}
handleChangeSelect = (e) => {
this.setState({
value: e.target.select,
})
}
handleChangeCheck = (e) => {
this.setState({
checked: e.target.checked,
})
}
//抽离出来 this报错 事件处理中的this为underfine

render() {
return (
<div>
<input
type="text"
value={this.state.text}
onChange={this.handleChange}
/>
<textarea onChange={this.handleChangeValue} value={this.state.value}></textarea>
<select onChange={this.handleChangeSelect} value={this.state.select}>
<option value="nan">男</option>
<option value="nv">女</option>
</select>
<input
type="checkbox"
checked={this.state.checked}
onChange={this.handleChangeCheck}
/>
</div>
)
}
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'))

运行结果

好客租房36-表单处理(3受控组件的示例)_父类

 

标签:checked,render,示例,36,value,表单,react,state,setState
From: https://blog.51cto.com/u_15460007/6140115

相关文章

  • 好客租房35-表单处理(2受控组件使用步骤)
    步骤1state中加个状态2给表单绑定一个chang事件改变表单的值设置state//导入reactimportReactfrom'react'importReactDOMfrom'react-dom'//导入组件//约定......
  • FH36、FH36船板、FH36执行标准
    1、FH36钢板简介:F是质量等级,H是高强度钢材,36代表屈服强度。FH36级系列产品具有良好的综合机械性能、焊接性能、工艺性能。FH36钢板船级社认证可做;CCS、DNV、GL、LR、BV、NK......
  • 代码随想录21 530.二叉搜索树的最小绝对差 | 501.二叉搜索树中的众数 | 236. 二
    530. 二叉搜索树的最小绝对差给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。差值是一个正数,其数值等于两值之差的绝对值。classS......
  • 【vue3+ts+elementplus】 大文件分片上传,断点续传,秒传 示例
    大文件分片上传,断点续传,秒传示例一文网尽关于大文件(分片)上传你需要知道的所有前置知识点1.html代码<template> <divclass="cardcontent-box"> <el-uploadref="up......
  • PHP判断Form表单是否提交
    $action=$HTTP_POST_VARS["Button1"];if($action=="提交"){//执行表单操作}else{//读取默认值}......
  • debian ipxe-qemu (version 1.0.0+git-20190125.36a4c85-5 bug and install kvm+qemu+
    环境debiansid/testingbug1我发现了在sid中的一个BUG,并在debianwiki中找到了这个BUG的记录BUG2以上我们得知了,这个重要BUG不影响我们本身,所以直接安装安装可以只安装QEMU......
  • 利用 Java POI 操作PPT示例
    [size=large][color=red]使用POI操作PPT文档[/color][/size][url]http://zyplaiai.iteye.com/blog/778547[/url]1)如果是创建新的PPT文档,直接使用S......
  • android ImageButton示例
    packagecom.xiaohang;importandroid.app.Activity;importandroid.app.AlertDialog;importandroid.app.Dialog;importandroid.app.AlertDialog.Builder;impo......
  • 【题解】CF1368E
    题目描述有一个由\(n\)个点\(m\)条边组成的有向无环图,每个点出度至多为2。您需要标记一些点(不超过\(\frac{4}{7}n\)个)。标记一个点\(u\)将会删除所有与\(u\)连......
  • CF 1368B Codeforces Subsequences
    题目地址题意:给你一个数n,构造一个字符串,使得至少有n个子串为codeforcesSolution用贪心的思想肯定是只在codeforces基础上修改对于每个字符,对答案的贡献都是乘以字符的......