讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > js教程 > 正文

0

0

Pastate.js 响应式 react 框架之表单渲染与操作

不言

不言

发布时间：2018-04-10 16:29:35

|

1804人浏览过

|

来源于php中文网

原创

本篇文章给大家分享的内容是关于pastate.js 响应式 react 框架之表单渲染与操作  ，有着一定的参考价值，有需要的朋友可以参考一下

这是 Pastate.js 响应式 react state 管理框架系列教程的第四章，欢迎关注，持续更新。Pastate.js Github

这一章，我们来看看如何在 pastate 里渲染和操作表单元素。

使用原生表单元素

我们在  BasicInfoView 组件的两个按钮下面添加一个输入框用于输入姓名，并添加一个勾选框用于选择性别，更改如下：

class BasicInfoView extends PureComponent {
    render() {
        ...
        return (
            

                ...
                

                    
                    
                

                

                    name:  

                    Is boy: 
                

            

        )
    }
}

上面添加两个了 input 标签，第一个 input 使用 name 数据, 第二个 input 使用 isBoy 数据。同时我们也先指定两个 input 的 onChange 处理函数。    
注意：如前面章节所提及，对于 imState 布尔值，请记得使用显式布尔值方式：checked={state.isBoy == true}。

接下来看看如何实现两个 onChange 处理函数：

class BasicInfoView extends PureComponent {
    ...
    handleNameChange(e){
        state.basicInfo.name = e.target.value
        store.sync() // 编辑中的输入框，需手动同步store
    }
    handleIsBoyChange(e){
        state.basicInfo.isBoy = e.target.checked
    }
    ...
}

非常熟悉和简单！你只需把更新的值赋给目标state节点即可。我们会发现多了个 store.sync() ，这个函数是让 pastate 立刻执行数据同步更新。由于很多输入法会在输入过程中会把带下划线的 “拼音字母” 输入到 input 中，如下：

Pastate.js 响应式 react 框架之表单渲染与操作

如果 pastate 执行异步更新会使带下划线 “拼音字母” 中断，因此我们在更新 编辑中的输入框 时，需要简单地使用  store.sync() 执行同步更新，让 “拼音” 连续。如果不是对 编辑中的输入框  进行修改或不需要支持输入法输入（如密码等），无需使用 store.sync() 。

初步完成！我们试着往输入框输入文字，或点击勾选框, 可以看到文字区域的值与 input 区域的视图都正常地进行更新！

与普通 react 表单的处理模式一样，我们可以通过 onChange 函数的实时控制输入的内容，如转化大小写、控制字符串长度等：

class BasicInfoView extends PureComponent {
    ...
    // 把输入值都转化为大写
    handleNameChange_uppercase(e){
        state.basicInfo.name = e.target.value.toUpperCase()
        store.sync()
    }

    // 控制文本长度在10个字符以内
    handleNameChange_limitedLength(e){
        if(e.target.value.length > 10) return；
        state.basicInfo.name = e.target.value
        store.sync()
    }
    ...
}

使用 pastate 双向绑定输入组件

使用过 vue.js 或 angular.js 的人都体验过自动双向数据绑定 (two-ways data binding) 的便捷性，但由于 react state 渲染的单向数据流原则，在 react 中没有默认提供这个功能。而 pastate 的 imState 具有保存节点信息的特殊性，能够很容易实现自动双向数据绑定功能！

pastate 为你提供了四个已实现双向数据绑定的高阶表单组件 (Higher Order Component, 通常简称 HOC) ，这些组件都是基于 PureComponent 实现的，具有良好的渲染性能，你可以尽情享用他们！这四个表单组件如下：

  • Input : 文本框

  • Checkbox : 复选框

  • RadioGroup : 单选框选项组

  • Select : 下拉选择框

Input 文本框

Input 组件可以用于显示单行输入框和多行输入框，只需要传入要绑定的值，当你通过界面更改输入框的值时，Input 组件会自动为你更新所绑定的 state ：

import { ..., Input } from 'pastate'
...
render(){
    let state = this.props.state
    return(
        ...
         {/** 单行输入框，内部使用  实现 */}
         {/** 多行输入框，内部使用