为什么 Ant Design Mobile 没有提交按钮？

Question

我正在使用带有 React 的 ant design mobile。
我想在 InputItem 或 TextareaItem 中提交值。
但我找不到 'submit button'。 ;(
我可以在 ant design 中找到 'Form'。

import React, { useCallback, useEffect, useReducer, useState } from 'react';
import useForm from 'react-hook-form';
import { Button, Icon, InputItem, List, NavBar, WhiteSpace } from 'antd-mobile';

const UserEdit = () => {

//...


return (
<form onSubmit={handleSubmit(onSubmit)}>
              <ProfileContents>
                <div
                  style={{
                    background: `url(/smile.png) center center /  22px 22px no-repeat`,
                    // marginLeft: '18pt',
                  }}
                />
                Hello, {profile.nickName}
              </ProfileContents>
              <ProfileModify>
                <ProfileInput>
                  <InputItem
                    style={{ backgroundColor: '#d7d7d7', borderRadius: '3.7pt' }}
                    placeholder={'please enter your nick name'}
                    onChange={handleNickNameChange}
                  />
                </ProfileInput>
                <Button // Button in ant design mobile (<a> tag)
                  type={'primary'} // ant design mobile component property. not html button tag property
                  htmlType={'submit'} // not working
                  children={'Submit!'}
                  disabled={sending}
                />
              </ProfileModify>
            </form>
)
}

Q1。 ant design mobile如何在表单中提交输入数据？
Q2。如何在 React 中使用带有 'useForm' 的 ant design mobile？
Q3. ant design和ant design mobile一起用可以吗？

Answer 1

antd-mobile 基于 React Native。它在 React 组件中的使用略有不同。

React Native 组件的 useForm 用法示例如下：

import React from "react";
import { Text, View, TextInput, Button, Alert } from "react-native";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { control, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <View>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={styles.input}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
            value={value}
          />
        )}
        name="firstName"
        rules={{ required: true }}
        defaultValue=""
      />
      {errors.firstName && <Text>This is required.</Text>}

      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={styles.input}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
            value={value}
          />
        )}
        name="lastName"
        defaultValue=""
      />

      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

如需参考，请查看文档 here。

为什么 Ant Design Mobile 没有提交按钮？

Why is there no submit button in Ant Design Mobile?

reactjs

next.js

antd

antd-mobile