React 动态添加输入表单/动态添加ref并传出

开发过程中经常需要封装组件，如果多个功能需求都差不太多，一个组件可以复用的话，那简直太方便了。

举个例子，一个输入表单的组件，复用时每一个不同的功能里，输入标签数量是不一样的，比如登录有两个输入框，而修改用户名密码可能有4个输入框。指定几个输入框以及提示、内容什么的可以通过props传入。重点是如何获取这几个输入标签的值并传给父组件呢？当然，一种方式是使用受控组件，每一个输入框对应一个state或者他们的值都传入到一个存数组的state里。另一种方式通过非受控组件实现，也就是这里要说的。

App.js

function App({
     getValues }) {
   
  const refs = [] // 用于储存每一个 <h3> 对应的 DOM，这里用h标签代替input是为了使效果更加直观
  const data = [1, 2, 3, 4, 5