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 >
            )
       }
}



相关文章
|
4天前
|
移动开发 JavaScript 前端开发
如何识别app中的页面是否是js(h5)页面
如何识别app中的页面是否是js(h5)页面
16 2
|
1天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
4天前
|
Web App开发 监控 JavaScript
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
实现JavaScript鼠标框选内容上报,需关注`Range`和`Selection`对象,处理各种元素选择情况,如文本、图片、输入框等。事件监听包括`mousedown`、`mouseup`、`selectionchange`等,用`debounce`防止频繁触发。通过`Range`获取选中内容,判断是否包含特定标签,决定返回HTML或文本。完整代码示例展示了如何实现这一功能。
10 0
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
|
10天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
14 0
|
10天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
12天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。
|
12天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
13 1
|
12天前
|
JavaScript UED
js得禁止页面滚动
js得禁止页面滚动
15 1
|
12天前
|
JavaScript 前端开发
js选取页面元素的方法
js选取页面元素的方法
16 2
|
12天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面

热门文章

最新文章