1. 前言
2.这里使用
antd的移动端框架antd-mobile来分析下react中的输入框具体用法
2. render
2.1 按需引入需要的组件
import { List, InputItem, Button, WingBlank, WhiteSpace } from 'antd-mobile'
2.2 分析
1.List 简单说就是白底的容器
2.InputItem 输入框
3.Button 按钮
4.WingBlank 2翼留白 双标签
5.WhiteSpace 上下留白 单标签
2.3 render代码
<div> <List > <WingBlank> <InputItem placeholder="请输入" labelNumber={20} value={searchValue} onChange={this.onChange} clear /> <WhiteSpace /> <Button type="primary" size="small" disabled={isDisabled} onClick={() => { this.searchSub() }}>提交</Button></WingBlank> <WhiteSpace /> </List> </div>
2.4分析 InputItem
1.clear 输入框后边会有个
x清空按钮2.labelNumber 标签的文字个数
3.onChange change 事件触发的回调函
3. onChange 事件
1.react没有
vue的v-model2.需要在
change事件获取用户输入的值,事件参数就是用户输入的值3.界面需要更改 必须通过
setState()函数来修改4.react就是实现了 类似
vue的双向绑定
// 搜索框change事件 // react 没有 v-model onChange = (value) => { // console.log("输入内容:", value) this.setState({ searchValue: value, }) if (value.length < 1) { // 为空 提交按钮 不可点击 this.setState({ isDisabled: true, hasError: true, }) Toast.info("不能为空") } else { this.setState({ isDisabled: false, hasError: false, }) } }
5.
state可以写到构造函数constructor外部,但是名字必须是state
state = { searchValue: "", listData: [], isDisabled: true, hasError: false }
4. 请求需要获取 输入框的值
4.1 核心代码
// 搜索请求 async searchRequest() { let { cityId } = this.props.match.params let { searchValue } = this.state let params = { city_id: cityId, keyword: searchValue } // async await // await 必须放在 async 里面使用 try { let searchResult = await axios.get("/test/user", { params }) return searchResult } catch (error) { console.log("搜索错误信息:", error) } }
4.2 分析
1.
cityId是通过路由跳转 动态绑定的参数2.
searchValue就是解构出来的输入框的值3.
awaitt规定必须放在async的函数中4.
async用来搞异步函数5.其实这个
await在Promise中就简单理解为脱掉一层then的壳就行
5. 提交事件
- 按钮点击的提交事件
5.1 核心代码
//**** 提交事件 async searchSub() { let result = (await this.searchRequest()).data // this.state.listData = result 错误的写法 XXX this.setState({ listData: result, // 提交完 输入框清空 searchValue: "", isDisabled: true }) }
5.2 分析
1.
async/await语法2.
setState修改函数
