前言
因为我没有系统的学习 react，是边写边通过搜索引擎找相对的问题，看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的。
重新设定表单输入框的值
//this.props.form.resetFields(); //重置表单的值 initvalues
//直接设定值
this.props.form.setFieldsValue({
username: "",
});
this.props.form.validateFields(); //再次调用验证表单方法，对表单再次验证
react中setState后，没有立即获取到最新的state中的值
在 setState 方法添加匿名函数回调
this.setState({
showVideo: checked,
},() =>{
console.log(this.state.showVideo);
});
React使用build 非 root
在项目的package.json文件中增加一个节点“homepage”:"."，或者是"./"
{
"name": "ksvdv",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^3.26.2",
"axios": "^0.19.0",
"js-cookie": "^2.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
react 使用 cookie
地址: https://github.com/js-cookie/js-cookie
安装 js-cookie
npm i js-cookie --save
在项目中引入，如在 App.js内容开头的 import语句后面添加
import Cookies from 'js-cookie';
使用
//获取cookie的值
let show_video = Cookies.get('show_video');
//设置一个cookie
Cookies.set('key','value');
如果将 boolean 类型的数据存入到 cookie中，取出将是字符型的 boolean值，不能直接与 boolean类型的值进行判断值是否相等，可以考虑存放到cookie的boolean类型数据使用1和0进行代替。
这是我存放 获取存入boolean类型的 cookie的处理。
let show_video = Cookies.get('show_video');
if(show_video === undefined){
show_video = true;
}else{
show_video = (show_video === "false")?false:true;
}
Cookies.set('show_video',show_video);
React axios POST 请求
安装 axios
npm install axios --save
引入
import axios from 'axios';
//axios的qs库
import Qs from 'qs';
发送 Content-type 为 application/x-www-form-urlencode POST 请求
axios.post('request_url',Qs.stringify({
username: 'username',
password: 'password'
})
).then(res=>{
console.log("res",res)
})
//如果不使用 axios的 qs 库，也可以使用URLSearchParams接口
let param = new URLSearchParams();
param.append("username", "username");
param.append("password", "password");
react 显示html
显示我的 state的 videoHtml
this.state={
videoHtml: "<div>Hello world</div>"
}
<div className="video-wrapper" dangerouslySetInnerHTML={{ __html: this.state.videoHtml }}></div>
固定显示html
<div className="video-wrapper" dangerouslySetInnerHTML={{ __html: '<div>Hi</div>' }}></div>
原理：
1.dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind；
2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;
3.既可以插入DOM，又可以插入字符串；
4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。
References
Antd Form 清空表单
react setState
react build
react html
react中dangerouslySetInnerHTML使用（简洁）