基于react+and Design实现下拉框，支持自由输入，hooks篇

基于基于react+and Design实现自由输入，hooks篇，主要使用到AutoComplete组件

import React, { useEffect, useState } from 'react';
import styles from './index.less';
import 'antd/dist/antd.css';
import { AutoComplete } from 'antd';
const { Option } = AutoComplete;

export default () => {
  let initDataList = [{ value: "16px" }, { value: '24px' }, { value: '32px' }, { value: '40px' }]
  const [dataList, setDataList] = useState(initDataList);
  const [myFontSize, setMyFontSize] = useState(12);

  const handleChange = (val) => {
    setMyFontSize(parseInt(val) + 'px')
  }
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>基于react+and Design实现下拉框，支持自由输入，hooks篇</h1>
      <br />

      <div>
        <span>字号：</span>
        <AutoComplete style={{ width: 200 }} onChange={handleChange}>
          {dataList.map((v, k) => { return <Option key={k} value={v.value}>{v.value}</Option> })}
        </AutoComplete>
        <br />
        <br />
        <div style={{ fontSize: myFontSize }}>我现在的字体是：{myFontSize} <br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quas quia aut cumque magnam esse harum explicabo, neque omnis totam? Cupiditate, doloremque quos qui suscipit corrupti illum reiciendis consectetur nihil.</div>

      </div>
    </div>
  );
}

如有问题请联系我~

欢迎加入QQ群: