react 在js文件中实现和jsx页面的双向绑定

简介: react 在js文件中实现和jsx页面的双向绑定

js文件



export const state = {
    "loginInfo": {
        "userName": '',
        "userPassword": '',
        "remember": false
    },
};
export function _setval(_this, e) {    
  //  _this是jsx页面传过来的this,否则使用不了this.setState
  //  e也是jsx页面传参过来的
    let value = e.target.value;
    let name = e.target.name;
    let { loginInfo } = state
    loginInfo[name] = value
    _this.setState({
        loginInfo
    })
}



jsx文件



import React, { Component } from 'react';
import {state,_setval} from '../../commonJS/index';  //引入js文件
export default class index extends Component {
render() {
        return (
            <React.Fragment >
              <ant.Input name="userName"  onChange={(e)=>{_setval(this,e)}} value={state.loginInfo.userName} }></ant.Input>
                <ant.Input.Password  name="userPassword" onChange={(e)=>{_setval(this,e)}} value={state.loginInfo.userPassword} }></ant.Input.Password>
            </React.Fragment >
            )
       }
}



相关文章
|
7月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
86 0
|
4月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
102 0
Next.js 实战 (六):如何实现文件本地上传
|
6月前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
6月前
|
XML 前端开发 JavaScript
react之了解jsx
react之了解jsx
|
7月前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
7月前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
43 2
|
6月前
|
存储 前端开发 JavaScript
react之jsx编译原理
react之jsx编译原理
|
8月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
109 5
|
8月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
7月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
426 0