1

我正在使用带有反应的蚂蚁设计手机。
我想在 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。如何使用 ant design mobile 以表单形式提交输入数据？
Q2。如何在反应中使用带有“useForm”的ant design mobile？
Q3。ant design和ant design mobile可以一起使用吗？

4

1 回答 1

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

作为参考，请在此处查看文档。

于 2020-07-04T10:35:18.353 回答