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?
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.