如何使用 React Hooks 获取 Antd Form 的值？答案

【问题标题】：How to get the value of Antd Form with React Hooks?如何使用 React Hooks 获取 Antd Form 的值？
【发布时间】：2018-12-12 11:26:40
【问题描述】：

下面是TextareaItemantd-mobile的例子，
我想用 React Hooks 重写它，
这是我的半成品代码：

import React, { useState, useEffect} from "react"
import { List, TextareaItem } from 'antd-mobile';
import { createForm } from 'rc-form';


function TextareaItemExample {

  useEffect(() => {
    //this.autoFocusInst.focus();
  });

  return (
    <div>
      <List renderHeader={() => 'Customize to focus'}>
        <TextareaItem
          title="title"
          placeholder="auto focus in Alipay client"
          data-seed="logId"
          ref={el => this.autoFocusInst = el}
          autoHeight
        />
        <TextareaItem
          title="content"
          placeholder="click the button below to focus"
          data-seed="logId"
          autoHeight
        />
      </List>
    </div>
  );
}

const TextareaItemExampleWrapper = createForm()(TextareaItemExample);

export default TextareaItemExampleWrapper;

问题：
1、如何通过React Hooks获取TextareaItem的值？获取这些值后我会发送ajax请求。有一个自定义的钩子react-use-form-state，但是它作用于html表单，如何在Antd Form上做同样的事情?

2、如何修改函数组件中的句子this.autoFocusInst.focus();？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

为了使用 ref，你可以使用 useRef 钩子。通过提供第二个参数作为空数组，还可以使 useEffect 的行为类似于componentDidMount。使用受控的 TextAreaItem，您也可以获取 state 中的值。

import React, { useState, useEffect, useRef} from "react"
import { List, TextareaItem } from 'antd-mobile';
import { createForm } from 'rc-form';


function TextareaItemExample {

  const [title, setTitle] = useState();
  const [content, setContent] = useState();

  const handleTitleChange = (value) => {
      setTitle(value);
  }
  const handleContentChange = (value) => {
      setContent(value)
  }
  const autoFocusInt = useRef();
  useEffect(() => {
    autoFocusInst.current.focus();
  }, []);

  return (
    <div>
      <List renderHeader={() => 'Customize to focus'}>
        <TextareaItem
          title="title"
          value={title}
          onChange={handleTitleChange}
          placeholder="auto focus in Alipay client"
          data-seed="logId"
          ref={autoFocusInst}
          autoHeight
        />
        <TextareaItem
          title="content"
          value={content}
          onChange={handleContentChange}
          placeholder="click the button below to focus"
          data-seed="logId"
          autoHeight
        />
      </List>
    </div>
  );
}

const TextareaItemExampleWrapper = createForm()(TextareaItemExample);

export default TextareaItemExampleWrapper;

如果您不将其设为受控输入，则可能您可以使用 ref 获取值。

【讨论】：