Why is there no submit button in Ant Design Mobile?

Question

i am using ant design mobile with react.
and i want to submit value in InputItem or TextareaItem.
but i couldn't find a 'submit button'. ;(
and i could find a 'Form' in 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>
)
}

Q1. how to submit input data in form using ant design mobile?
Q2. how to use ant design mobile with 'useForm' in react?
Q3. is ok to use ant design and ant design mobile together?

score 1 · Accepted Answer · edited Jan 26 '21 at 19:50

antd-mobile is based on React Native. It's used a little bit differently for React components.

An example usage of useForm for React Native components is below:

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

For reference, please check the documentation here.

Why is there no submit button in Ant Design Mobile?

1 Answers1