Как получить значение формы Antd с помощью React Hooks? - PullRequest
Новая
       8

Как получить значение формы Antd с помощью React Hooks?

0 голосов
/ 12 декабря 2018

Ниже TextareaItem пример antd-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 、 Как получить значение TextareaItem с помощью React Hooks? Я отправлю ajax-запросы после получения этих значений. Есть пользовательский хук реагировать-использовать-форму-состояние , но оно действует на html-форме, как сделать то же самое на Antd-форме?

2 、 Как изменить предложение this.autoFocusInst.focus(); в компоненте функции?

1 Ответ

0 голосов
/ 12 декабря 2018

Чтобы использовать ref, вы можете использовать ловушку useRef.Также useEffect может вести себя как componentDidMount, предоставляя второй параметр в виде пустого массива.Используя управляемый TextAreaItem, вы также можете получить значения в состоянии. 

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.

...