为什么中没有提交按钮？

Question

我使用蚂蚁设计移动与反应。

我想在InputItem或TextareaItem中提交值。

但我找不到一个“提交按钮”。;(

我可以在蚂蚁设计中找到一种“形式”。

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。如何使用蚂蚁设计手机以表格形式提交输入数据？

Q2。如何使用带有“useForm”的蚂蚁设计手机？

Q3。可以用蚂蚁设计和蚂蚁设计一起移动吗？

Answer 1

antd-mobile是基于React本地的。它对反应元件的使用有点不同。

以下是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>
  );
}

如需参考，请查阅文档这里。