react_bug

初始化

 yarn add [email protected]

0.創建一個react項目

 npm install -g create-react-app  
 create-react-app [project-name]  
 cd [project-name]  
 npm start

1.爲什麼 沒有webpack配置文件？

webpack的配置需要 輸入 npm run eject 命令將所有內建的配置暴露出來

2.react.js - 基於create-react-app的打包後文件根路徑修改  

找到react-script模塊文件夾config下面  paths.js
function getServedPath(appPackageJson) {
      const publicUrl = getPublicUrl(appPackageJson);
      const servedUrl =
      envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './'); // 配置文件跟路徑'/'
      return ensureSlash(servedUrl, true);
 }

3.去掉語法檢查

webpack.config.dev.js
{
  test: /\.(js|jsx|mjs)$/,
  enforce: 'pre',
  //去掉語法檢查
 /* use: [
    {
      options: {
        formatter: eslintFormatter,
        eslintPath: require.resolve('eslint'),
      },
      loader: require.resolve('eslint-loader'),
    },
  ],*/
  include: paths.appSrc,
},

4.react中配置webpack，支持@符號導入模塊

config webpack.config.dev.js 和 webpack.config.prod.js 
 添加alias別名

數組賦值

this.setState(
 {
   checkedKeys: this.state.checkedKeys.concat(ary)
 }, () => {
   console.log(this.state.checkedKeys);
 }
);

合併多個對象

addData = Object.assign({}, role, addData, operateType_2);

多個不同的chechebox 點擊選中事件

onChangeCheckboxAction(e) {
    console.log(e)
	let change_key = e.target.id;
	console.log(e.target.id)
 
	if(e.target.checked == true) {
		console.log("選中")
		this.setState({
			[change_key]: 1
			},()=>{
			//console.log(this.state.book_private)
			})
		} else {
			this.setState({
			[change_key]: 0
			},()=>{
			//console.log(this.state.book_private)
			})
		}
		
	}

<Checkbox checked={this.state.book_private} id="book_private" 
onChange={ this.onChangeCheckboxAction}>私教預約</Checkbox>

onChange傳入其他的值

1.onChange={this.onchange.bind(this,你要傳的參數)}    
用bind，this後面加上你要的參數，他會把value值傳到你寫的方法的最後一個參數上

2.onChange={(value)=>{this.onchange(value,你要傳的參數)}}  
 顯式地把value寫出來，這樣就可以把value和參數都傳過去