20201020 react笔记，关于实现双向绑定时遇到的问题，以及解决跨域。

react：

1.getFieldDecorator 使用这个进行form表单数据绑定，最后用value 进行整个 form表单提交。

2.函数式组件 ，会导致input输入失焦。(onchange时 每输入一下就会失焦) 直接使用，就不会出现失焦问题。

const Demo = () => ( <div>...... <input value={this.state.zjForm.mc} onChange={(e) => this.inputOnChange('mc', e)}/> </div> ) return ( <div className="cardLayout" > <Demo /> </div> )

改变方法：解决问题并实现双向绑定

return ( <div className="cardLayout"> <div>...... <input value={this.state.zjForm.mc} onChange={(e) => this.inputOnChange('mc', e)}/> </div> </div> )

3.proxy 解决跨域问题 react项目中，setupProxy.js 配置：

const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/test', { //测试 target: 'http://...', secure: false, changeOrigin: true, pathRewrite: { "^/test": "/test" } }), ) }

对应的api文件：

import request from '@/utils/request' //查询质检信息 export function getZjshxxList(data) { return request({ url:'test/.../...', //test就为对应的http接口 method: 'get', data }) } //修改质检信息 export function upDateZjshxx(data) { return request({ url:'test/.../...', method: 'post', data }) }