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

【问题标题】：Why is there no submit button in Ant Design Mobile?为什么 Ant Design Mobile 中没有提交按钮？
【发布时间】：2020-07-04 08:32:17
【问题描述】：

我正在使用带有 react 的 ant design mobile。
我想在 InputItem 或 TextareaItem 中提交值。
但我找不到“提交按钮”。 ;(
我可以在 ant design 中找到一个“表单”。

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>
)
}

第一季度。如何使用 ant design mobile 以表单形式提交输入数据？
Q2。如何在反应中使用带有“useForm”的ant design mobile？
Q3。 ant design和ant design mobile可以一起用吗？

【问题讨论】：

标签： reactjs next.js antd antd-mobile

【解决方案1】：

antd-mobile 基于 React Native。对于 React 组件，它的使用方式略有不同。

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

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。

【讨论】：