1. 前言

1.antd-mobile
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-model
2.需要在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.await t规定必须放在 async的函数中
4.async用来搞异步函数
5.其实这个 await 在Promise中就简单理解为脱掉一层then的壳就行

5. 提交事件

1. 按钮点击的提交事件

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修改函数

参考资料

async/await语法

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉