我已经写了这个代码，我不能保持两个不同的identiy类型的数据数组到一行作为一个字段，我已经使用了这个代码
import React from 'react'
import {Form,Field,ErrorMessage,Formik} from 'formik'
import * as yup from 'yup'
const schema=yup.object().shape({
cmt:yup.string().min(4,'minimun 4 words').required('comment is reqired'),
name:yup.string().required('Name is reqired'),
email:yup.string().required('Email is reqired'),
website:yup.string().required('Enter website url or name'),
})
function ReplyForm() {
const data=[
{type:'text',placeholder:'Write a comment',identiy:'cmt'},
{type:'text',placeholder:'Name',identiy:'name'},
{type:'email',placeholder:'Email',identiy:'email'},
{type:'text',placeholder:'Website',identiy:'website'},
]
return (
<div className='w-full flex justify-center'>
<div className='w-10/12 bg-blue-200'>
<Formik
initialValues={{
cmt:'',
name:'',
email:'',
website:'',
}}
validationSchema={schema}
onSubmit={(values)=>{
console.log(values)
}}
>
{({handlesubmit})=>{
return <Form onSubmit={handlesubmit}>
<div className='w-3/5'>
{data.map((val,i)=>{
if ((val.identiy==='name')||(val.identiy==='email')){
return <div key={i} className='flex justify-between'>
<Field type={val.type} name={val.identiy} placeholder={val.placeholder} className='w-1/2'/>
</div>
}
else{
return <div key={i}>
<Field type={val.type} name={val.identiy} placeholder={val.placeholder}/>
</div>
}
})}
</div>
</Form>
}}
</Formik>
</div>
</div>
)
}
export default ReplyForm它的输出是这样的
但实际上我想要这样的东西，其中姓名和电子邮件将在同一行，就像这样
帮我把这两个排成一排
2条答案
按热度按时间42fyovps1#
Flex不是这样工作的。你需要把名字和电子邮件包在一个flex里面，使它们成一排。我认为你应该让父节点有flex-wrap，子节点有100%的宽度，名字和电子邮件的宽度为50%（如果flex有gap或其他东西，让它延伸到下一行，用calc或其他方式减少宽度）。有一个例子
gab6jxml2#
最好使用CSS Grid。
代码：
结果：
说明：
grid定义您的grid。grid-cols-1为移动设备创建一个具有1个相等大小的列的网格。gap-6以更改网格中行和列之间的间距。sm:grid-cols-2是为640px和更宽的屏幕创建一个具有2个相等大小的列的网格。对于那些你想在同一行的元素（比如“评论”和“网站”），使用
sm:col-span-2让它们占据640px和更宽屏幕上的整个水平空间。参见playground。