基于基于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群: