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

世间万物皆对象

发布于 2024-03-20 19:57:37

930

发布于 2024-03-20 19:57:37

文章被收录于专栏：startstart

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

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-05-19，如有侵权请联系 cloudcommunity@tencent.com 删除

react