Uncategorized – Page 43 – 庭喵的出包星球

reorder list

export const langMapDataA = {
  sports: "Sports",
  casino: "Casino",
  esports: "E-Sports",
};

const reCraftArray = Object.keys(viewLang).map((key) => ({
  key: key,
  value: viewLang[key],
}));

const [list, setList] = useState(reCraftArray);

React.useEffect(() => {
  const reOrderSort = list.reduce((a, c) => {
    return a.concat(c.key);
  }, []);
  setProp((props) => (props.order = reOrderSort));
}, [list]);

// 每次list有變化都再變成陣列一次，然後再傳給元件

Array.prototype.slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

slice就像：我要刪除前面的二個！ animals.slice(2)
（實際上是index為2保留，之後的也保留。刪掉０、１）
我要刪除前面的二個，第四個以後的也都刪掉 animals.slice(2, 4)
（實際上是index為2的保留，保留到四的以前…不包含四，記起來比較麻煩。）
只刪除一個的情況：
我要刪除第二個，只刪除一個(第二個參數變成要刪幾個)
months.splice(2, 1);

JSON.stringify() And JSON.parse()

有興趣想買的課

上傳圖片

純html＋JavaScript的圖片上傳功能很簡單，可以看這篇
How To Display Uploaded Image In Html Using Javascript ?
可是假設又有「拖曳上傳」需求的話，這篇就沒辦法滿足，所以用套件先擋擋

react-select 小教學

react-select

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

menuIsOpen={true}

貼上這個可以每次都是展開的，要inspect比較方便

blurInputOnSelect

這個props可以讓選擇後失去焦點，不會有focus效果

要客製化style的話，可以寫一個客製化風格物件，
文件教學在這。另外可以看DOM結構的classname來對應

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

  const App = () => (
    <Select
      styles={customStyles}
      options={...}
    />
  );

不過做這個我覺得也許可以搭配Storybook。