用户登录

textarea,文本区域,这种表单元素可以收集多行内容。

在 AppForm 组件里可以试一下使用这种表单元素,去掉之前添加的这个文本框,先添加一组 div 元素,然后使用一个 textarea ,在元素上用 placeholder 可以设置一下元素的占位符文字(写点东西),也就是元素在没有内容的时候显示的东西。

想知道元素上可以使用的属性,在 vscode 编辑器,可以按住 command,windows 用户可以按住 ctrl 键,然后点击这个元素的名字,可以定位到这个元素的类型定义,继续再查看一下 TextareaHTMLAttributes 这个类型,这里列出的东西就是可以用在 textarea 元素上的一些属性。

回到 AppForm 继续编辑这个 textarea,在它上面用 value 绑定一个值,这个值就是组件里的 content 这个 state,this.state.content。然后绑定它的 onChange 事件,用 this.onContentChange 来处理这个事件。

之前我们在组件里定义过这个方法,它做的事情就是在每次元素值有变化的时候,让元素当前的值作为组件的 content 这个状态的值。

注意现在这个方法的参数提示了一个错误,因为现在它处理的是 textarea 元素的 onChange,所以 FormEvent 的参数应该换成 HTMLTextAreaElement。

在浏览器预览一下,现在界面上会显示一个文本区域,我们可以调整一下它的大小,它里面现在显示的文字是元素的 placeholder 属性设置的。在这个文本区域里可以输入多行内容。

按一下提交按钮,会在控制台上输出组件当前的状态,content 属性的值就会是我们在文本区域里输入的内容。

多行文本:Textarea《 React 前端应用开发:表单元素 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点