react 函数式组件如何保存子组件的数据?比如class类组件常用用state

Question

如题.
当子组件表单提交时,调用父组件的方法console.log(),能够打印出子组件提交的数据

尝试了算是两种比较笨方式吧:
方法１.在父组件中定义一个函数,一个list[]数组保存数据.当下一个子组件表单提交后,上一个表单的数据没有了.

方法２.在父组件中定义３个函数,３个list[]数组保存数据.也都是能打印出当前提交的子组件数据.

父组件:

  ...
  const createModelData = []
  const saveFormData = (value) => {
    createModelData.push(value)
    console.log(createModelData)　//子组件提交时输出值
  }
  ...
  return(
  ...
  <ConnectForm
    onAddConnectForm={saveFormData}
  />
  ...
  )

子组件:

  okHandle = () => {
    this.props.onAddConnectForm(this.state)
  };

结构如下:

总结出的问题:对于react分父子组件,但是对于html就是一个整体,当子组件表单提交后,定义在父组件里的createModelData = []也就顺间消毁了,所以后面都是空.

问:在函数式组件里,如何保存子组件的数据?

Answer 1

这个很简单，你提交那一瞬间，保存一份在内存里面，一个import进来的对象里面就可以了

Answer 2

react16.8函数组件可以用 Hook定义状态

const [state, setState] = React.useState([])