react创建自定义组件_为您的React Web应用程序创建一个自定义自动调整大小的textarea组件...

react创建自定义组件

One of the weakest points of the web are the native form controls provided by web browsers. Although some great efforts are being done by browser vendors to improve what we get from plain old HTML, many useful elements are still missing.

Web的最弱点之一是Web浏览器提供的本机表单控件。 尽管浏览器供应商正在做一些巨大的努力来改进我们从普通的旧HTML中获得的内容，但是仍然缺少许多有用的元素。

One example of a pretty darn useful form input that is missing is a text area that grows in size along with its content. Most of the times when you have a text area in your web application, you don't actually know how much text your users are going to enter, and having your users deal with scrollbars when editing text provides them with a bad UX, especially on touchscreen devices.

一个缺少有用的非常有用的表单输入的示例是一个文本区域，该文本区域的大小和内容一起增加。 在大多数情况下，Web应用程序中都有文本区域时，您实际上并不知道用户将要输入多少文本，并且在编辑文本时让用户处理滚动条会给用户带来不良的用户体验，尤其是在触摸屏设备。

The best solution to this problem is a textarea that adapts its size to its content, and in this article we are gonna be building exactly that. There are many packages available on npm that already solve this problem, such as react-textarea-autosize, but building your own stuff is always exciting, right? Outside of being able to customize the functionality of your component however you like, you will also be learning about how hooks and refs works in React. Sounds fun, doesn't it? 🙂

解决此问题的最佳方法是根据其内容大小调整文本区域，在本文中，我们将对此进行精确构建。 npm上有许多可以解决此问题的软件包，例如react-textarea-autosize ，但是构建自己的东西总是令人兴奋的，对吗？ 除了能够根据需要自定义组件的功能之外，您还将学习钩子和引用在React中的工作方式。 听起来很有趣，不是吗？ 🙂

1.创建基础组件