@@ -62,65 +62,76 @@ const propDefinitions = [
6262 defaultValue : '--' ,
6363 } ,
6464] ;
65+
66+ const renderMultipeTextArea = ( ) => {
67+ const [ value , setValue ] = useState ( 10 ) ;
68+ const [ size , setSize ] = useState ( { width : 0 , height : 0 } ) ;
69+ const onChange = useCallback ( ( e ) => setValue ( e . target . value ) , [
70+ value ,
71+ ] ) ;
72+ const onPressEnter = ( e ) => console . log ( `enter key is pressed` ) ;
73+ const onResize = useCallback (
74+ ( { width, height } ) => {
75+ console . log (
76+ `size is changed, width:${ width } ${ height }
77+ ) ;
78+ setSize ( ( resize ) => ( { ...size , width, height } ) ) ;
79+ } ,
80+ [ size . width , size . height ]
81+ ) ;
82+
83+ return (
84+ < >
85+ < TextArea
86+ placeholder = "Autosize height based on content lines"
87+ autoSize
88+ />
89+ < div style = { { margin : '10px 0' } } />
90+ < TextArea
91+ placeholder = "Autosize height with minimum and maximum number of lines"
92+ autoSize = { { minRows : 2 , maxRows : 6 } }
93+ />
94+ < div style = { { margin : '10px 0' } } />
95+ < TextArea
96+ value = { value }
97+ onChange = { onChange }
98+ onResize = { onResize }
99+ onPressEnter = { onPressEnter }
100+ placeholder = "Controlled autosize"
101+ autoSize = { { minRows : 3 , maxRows : 5 } }
102+ />
103+ </ >
104+ ) ;
105+ } ;
106+
65107stories . add (
66108 'Basic Usage' ,
67109 ( ) => {
68- const renderMultipeTextArea = ( ) => {
69- const [ value , setValue ] = useState ( 10 ) ;
70- const [ size , setSize ] = useState ( { width : 0 , height : 0 } ) ;
71- const onChange = useCallback ( ( e ) => setValue ( e . target . value ) , [
72- value ,
73- ] ) ;
74- const onPressEnter = ( e ) => console . log ( `enter key is pressed` ) ;
75- const onResize = useCallback (
76- ( { width, height } ) => {
77- console . log (
78- `size is changed, width:${ width } ${ height }
79- ) ;
80- setSize ( ( resize ) => ( { ...size , width, height } ) ) ;
81- } ,
82- [ size . width , size . height ]
83- ) ;
84- return (
85- < >
86- < TextArea
87- placeholder = "Autosize height based on content lines"
88- autoSize
89- />
90- < div style = { { margin : '10px 0' } } />
91- < TextArea
92- placeholder = "Autosize height with minimum and maximum number of lines"
93- autoSize = { { minRows : 2 , maxRows : 6 } }
94- />
95- < div style = { { margin : '10px 0' } } />
96- < TextArea
97- value = { value }
98- onChange = { onChange }
99- onResize = { onResize }
100- onPressEnter = { onPressEnter }
101- placeholder = "Controlled autosize"
102- autoSize = { { minRows : 3 , maxRows : 5 } }
103- />
104- </ >
105- ) ;
106- } ;
110+ const [ inputValue , setInputValue ] = useState ( "" )
111+ const handleInputChange = useCallback ( ( e ) => setInputValue ( e . target . value ) , [ inputValue ] )
112+
107113 return (
108114 < >
109115 < h2 > 简述</ h2 >
110116 < p > 通过鼠标或键盘输入内容，是最基础的表单域的包装。</ p >
111- < h3 > 使用示例 1 - Input</ h3 >
112- < Input placeholder = "search" />
113- < h3 > 使用示例 2 - 带字数提示的文本域</ h3 >
117+ < h3 > 使用示例 1 - Input基本使用</ h3 >
118+ < Input placeholder = "basic usage" />
119+ < h3 > 使用示例 2 - Input默认值</ h3 >
120+ < Input placeholder = "input default value" defaultValue = "default value" />
121+ < h3 > 使用示例 3 - 输入框定义了三种尺寸（大、默认），高度分别为 40px、32px</ h3 >
122+ < Input size = "large" placeholder = "please input large size" />
123+ < Input placeholder = "input default size" value = { inputValue } style = { { marginTop : 10 } } onChange = { handleInputChange } onPressEnter = { e => console . log ( 'enter key is pressed' ) } />
124+ < h3 > 使用示例 4 - 带字数提示的文本域</ h3 >
114125 < TextArea
115126 placeholder = "replace"
116127 maxLength = { 100 }
117128 showCount = { true }
118129 style = { { marginTop : 10 } }
119130 />
120- < h3 > 使用示例 3 - 用于多行输入</ h3 >
121- < TextArea rows = { 4 } placeholder = "multipe line" />
131+ < h3 > 使用示例 5 - 用于多行输入</ h3 >
132+ < TextArea rows = { 4 } placeholder = "input multipe line" defaultValue = "hi textarea" />
122133 < h3 >
123- 使用示例 4 - autoSize 属性适用于 textarea
134+ 使用示例 6 - autoSize 属性适用于 textarea
124135 节点，并且只有高度会自动变化。另外 autoSize
125136 可以设定为一个对象，指定最小行数和最大行数。
126137 </ h3 >
0 commit comments