フォームフォームでデータを取得する 2 つの方法 (例として入力を取り上げます)
1. formRef.current.getFieldsValue() を使用して、フォーム フォーム内のすべてのデータを取得します。
const formRef = createRef<any>();
//1.获取 表单中所有数据的方法
let rtkobj =formRef.current.getFieldsValue();
//取出某条数据
rtkobj.landName
//2.重置 表单中所有数据
formRef.current.resetFields();
//3.设置 表单中某个组件的值（formRef.current.getFieldsValue()中一定要有这个属性名）
//直接
formRef.current.setFieldsValue({
landName: '新值' });
//间接（已知inputId="landName"时）
formRef.current.setFieldsValue({
[inputId]: '新值' });
//组件
<Form className="rtk-form" ref={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
2. Form.useForm() を通じて Form フォーム内のすべてのデータを取得します。使用法は上記と同じですが、途中に current を追加しません。
const [formRef] = Form.useForm();
//1.获取 表单中所有数据的方法
let rtkobj =formRef.getFieldsValue();
//以此类推
<Form className="form" form={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
注：上記 2 つの方法は状況に応じて使い分けられますが、データが取得できれば使用可能です。
フォーム フォームのデータ (入力値など) を監視または同期するには 2 つの方法があります。
1. useState および onChange イベントの従来のレンダリングを使用して、
const [keyWord, setKeyWord] = useState('');
<Input
value={
keyWord}
onChange={
(e) => setKeyWord(e.target.value)}
size="large"
style={
{
width: 240, marginRight: 24 }}
placeholder="请输入机具名称"
/>
2. formRef.current.setFieldsValue() メソッドを使用すると、新しい値セットが表示用のコンポーネントに同期されます。
//3.设置 表单中某个组件的值（formRef.current.getFieldsValue()中一定要有这个属性名）
//直接
formRef.current.setFieldsValue({
landName: '新值' });
//间接（已知inputId="landName"时）
formRef.current.setFieldsValue({
[inputId]: '新值' });
//组件
<Form className="rtk-form" ref={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
注:
ビジネス処理では、[入力] ボックスの入力値を何度も変更した後、実際に let rtkobj =formRef.current.getFieldsValue() によってデータが取得される場合がありますが、ビジネス メソッドで印刷が間に合わないことがあります。このとき、操作の onblur(e) または onChange(e) メソッドのパラメーター e.target.value を介して、特定の入力値をすばやく取得できます。