2020/10/20 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
  })
}