如何使用 React Hooks 获取 Antd Form 的值?
How to get the value of Antd Form with React Hooks?
下面是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请求 values.There是一个自定义的hook react-use-form-state,但是它作用于html form,如何在 Antd Form 上做同样的事情?
2、如何修改函数组件中的句子this.autoFocusInst.focus();
?
要使用 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.
获取值
下面是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请求 values.There是一个自定义的hook react-use-form-state,但是它作用于html form,如何在 Antd Form 上做同样的事情?
2、如何修改函数组件中的句子this.autoFocusInst.focus();
?
要使用 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.
获取值