ant design 入门

Ant Design 入门

学习Input组件
看代码：

import React from 'react'
import ReactDom from 'react-dom'
import { useState } from 'react';
import { TreeSelect,Input,Button } from 'antd';


const treeData = [
    {
      value: 'parent 1',
      title: 'parent 1',
      children: [
        {
          value: 'parent 1-0',
          title: 'parent 1-0',
          children: [
            {
              value: 'leaf1',
              title: 'leaf1',
            },
            {
              value: 'leaf2',
              title: 'leaf2',
            },
          ],
        },
        {
          value: 'parent 1-1',
          title: 'parent 1-1',
          children: [
            {
              value: 'leaf3',
              title: <b style={{ color: '#08c' }}>leaf3</b>,
            },
          ],
        },
      ],
    },
  ];

  const App = () => {
    const [value, setValue] = useState('');
    const [inputValue, setInputValue] = useState('');
    const [defaultValueSelect,setDefaultValueSelect] = useState("leaf2")
    const onChange = (newValue) => {
      setValue(newValue);
    };
    const onClickButton = () => {
      
      setDefaultValueSelect(inputValue)
      console.log(inputValue)
    };
    const onChangeText=(value)=>{
      setInputValue(value.target.value)
    }

    
    
    return (
      <div>
        <Input placeholder="Basic usage" style={{
          width: '30%',
        }} onChange={onChangeText}/>


        <Button type="primary" onClick={onClickButton}>Primary Button</Button>

        <TreeSelect
        showSearch
        style={{
          width: '30%',
        }}
        dropdownStyle={{
          maxHeight: 400,
          overflow: 'auto',
        }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={onChange}
        treeData={treeData}
        defaultValue={defaultValueSelect}
      />

      </div>
      

      
    );
  };

const element = <App></App>

ReactDom.render(element,document.getElementById('root'))

页面效果：