Input 输入框

Input 最佳实践

多个 Input输入

function App() {
  const [state, setState] = useState({})
  const handleInputChange = (field) => {
    return (e) => {
      setUser((prevState) => ({
        ...prevState,
        [field]: e.target.value
      }));
    };
  };
  return (
    <Input
      value={state.name}
      onChagne={handleInputChange("name")}
    />
  )
}

多个组件类型

策略模式，优化 if else逻辑

import {
  VipAccount,
  AdminAccount,
  ModeratorAccount
} from './component';
const ACCOUNTS_MAP = {
  'vip': VipAccount,
  'admin': AdminAccount,
  'moderator': ModeratorAccount,
}
function App({ type }) {
  const Component = ACCOUNTS_MAP[type]
  return (<Component />)
}

ToDoList

const DEFAULT_ITEMS = [
  1, 2, 3, 4, 5
]
function toggleArrayItem (arr, val) {
  return arr.includes(val) 
    ? arr.filter(el => el !== val) 
    : [...arr, val];
}
function useItemsList() {
  const [items, setItems] = useState(DEFAULT_ITEMS)
  const handleToggleItem = (num) => {
    return () => {
      setItems(toggleArrayItem(items, num))
    }
  }
  return {
    items,
    handleToggleItem,
  }
}

金额输入

多币种