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'))
页面效果: