如何在react中并排放置两个输入字段
在React中并排放置两个输入字段可以使用Flexbox布局或Grid布局来实现。以下是使用Flexbox布局的示例：
- 引入React和相关组件：
import React from 'react';
import { TextInput, View } from 'react-native';- 创建一个包含两个输入字段的组件：
const App = () => {
return (
<View style={{ flexDirection: 'row' }}>
<TextInput style={{ flex: 1, marginRight: 10 }} />
<TextInput style={{ flex: 1 }} />
</View>
);
};- 渲染组件：
export default App;在上述示例中，我们使用了Flexbox布局，并将父容器的flexDirection属性设置为row，这样子组件就可以水平并排放置。每个输入字段都使用了flex: 1来平分父容器的宽度，并使用marginRight属性来给第一个输入字段添加间距。
如果你希望使用Grid布局来实现，则需要使用相关的CSS网格布局属性。以下是一个使用Grid布局的示例：
- 引入React和相关组件：
import React from 'react';
import { TextInput, View } from 'react-native';- 创建一个包含两个输入字段的组件：
const App = () => {
return (
<View style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 10 }}>
<TextInput />
<TextInput />
</View>
);
};- 渲染组件：
export default App;在上述示例中，我们使用了Grid布局，并通过gridTemplateColumns属性将父容器分为两列，每列的宽度使用1fr来平分。columnGap属性用于添加列之间的间距。
这是一个基本的示例，你可以根据自己的需求进一步定制样式和布局。至于推荐的腾讯云相关产品，可以在腾讯云官方网站进行查找和了解。
相关·内容
我是React.JS的新手，正在尝试理解下面的事情。假设我有两个组件:两个HTML文本输入；我想要实现的是:当用户更改第一个文本字段中的文本时-更改同时出现在第二个文本字段中；反之亦然-当用户更改第二个文本字段中的文本时，更改也会出现在第一个文本字段中。用react的方式做这件事的正确方式是什么？应该在onChange处理程序中写入什么内容？
浏览 0提问于2014-05-25得票数 5
1回答
由于某些原因，我需要在BIRT中重叠两个报告元素。例如，我需要将两个标签放在另一个标签上。这在BIRT中是可能的吗？我使用的是BIRT4.3。通常，当我们在报表设计器中放置元素时，每一项都占据整行。有时我需要重叠元素，有时我需要并排放置元素。并排可以通过Grid实现，但我不确定如何重叠报表项？请提前给予帮助和感谢。
浏览 1提问于2013-10-02得票数 2
2回答
我有一个按钮与数据图标=“家”和输入的类型搜索，必须并排放置。但它是在另一个下面显示的。我怎样才能把它并排显示呢？当在浏览器中看到时，它正在创建自己的div标记。可以并排显示吗？下面是我使用HTML5和jquery开发移动应用程序的代码。
浏览 3提问于2013-10-22得票数 0
回答已采纳
我想知道如何在BIRT布局中指定并排显示的字段，例如，在地址行中指定城市州邮政编码。默认情况下，它似乎将字段放在另一个字段的上方，而我似乎找不到一种方法来并排重新定位它们
BIRT 2.6.0和Eclipse Helios
浏览 0提问于2010-08-31得票数 3
回答已采纳
我已经添加了两个控件，比如文本框。
但它是并排添加的。
我想要移动对象，就像在Visual Studio中一样。
有人能教我怎么做吗？
浏览 1提问于2013-02-01得票数 0
3回答
因此，我有两个字段集，包装在一个标签中，希望彼此相邻显示。下面是我的代码：
因此，分别包含输入框和说明的两个字段集应该并排出现。我应该在我的代码中更改/添加什么才能使其工作？谢谢
浏览 0提问于2012-09-28得票数 0
回答已采纳
我正在使用"react-intl": "^2.4.0"和"react": "^16.2.0"。
我试图将<FormattedMessage/>标记的输出分配给一个常量，并将其放在输入标记占位符中。
期望输出输入字段中有相应语言的文本，但它是文本框中的对象对象。
浏览 0提问于2018-09-20得票数 5
回答已采纳
嗨，所以我有一个页面注册和登录表单并排。我为表单的电子邮件输入部分使用了react组件。但是，当填写一个时，两个都会同时填写，有没有办法防止这种情况？
浏览 0提问于2016-04-27得票数 0
1回答
用户在href标记中生成的链接如下所示：
javascript:(() => {alert('MALICIOUS CODE running on your browser')})();
我只是在不检查服务器的页面上使用输入字段注入URL，URL以http / https开头。在react呈现的页面上，我可以稍后单击链接，查看我的代码正在运行。
为什么这样做是可行的，因为人们经常说：
react自动转义everything给您。()
浏览 2提问于2017-10-20得票数 2
1回答
我正在构建一个用于创建烹饪食谱的component in React。我正在使用react-hook-form来验证表单。我的容器里有两张表格。一个用于添加配料，具有三个输入字段(名称、数量、单位)，另一个用于步骤-具有一个输入字段。当我添加配料或步骤时，我会验证输入的数据是否正确，并阻止向列表中添加项目，如果数据不正确，该列表位于此表单的下方。到目前一切尚好。但我的问题是，我需要使用页面底部的“添加食谱”按钮访问这两个表单的验证过程。例如，如果我将那些必需的输入字段留空，我希望通过按下“添加配方”按钮来检查，而不仅仅是提交这两个“子窗体”。下面是gist的链接：Link。有没有人可以看看我
浏览 15提问于2020-04-06得票数 0
1回答
处理HTML字段集的大小
、、、
我有一些这样的结构
<table>
<tr>
<td valign="top" style="width: 48%;">
<fieldset>
<legend><b>Company Info:</b> </legend>
<table width="100%">
浏览 1提问于2012-09-13得票数 0
我有两个字段需要并排显示，如安卓PreferenceScreen中的下图所示。我该怎么做呢？
浏览 2提问于2016-06-06得票数 0
在我说之前，为我糟糕的英语道歉。我在用vpython做轨道模拟，因为地球科学老师让我做的。
下面的链接是我迄今为止工作的结果。
不幸的是，我不能同时观看模拟和图表，所以我想把两个图形并排放在画布下面。另外，我想把“设置”放在3d画布旁边。
我试过不同的方法，但都没有用。
我找到了这个vpython 6链接。
在这个链接中，我可以找到画布和设置并排放置的GUI图像。但我也没能解决这个问题。
，我可以在vpython 7中随意地放画布或任何东西吗？
还是在vpython 6?中
浏览 2提问于2021-11-24得票数 3
回答已采纳
我正在使用TextFormField和DropdownButtonFormField制作一个带有颤振的文本输入。但是，我需要输入与边界并排，如果默认放置它们，则在它们之间有两个边界。无论如何，我需要只在使用TextInput的某些侧应用边框，同时保持根据输入状态更改边框的能力(错误、焦点、禁用.)。我曾经想过用一个Container包装输入字段，并给这个容器一个边框，但是我无法处理输入状态。
由这两个字段创建的“加倍”边界：
浏览 2提问于2022-06-24得票数 1
我用的是反应台。我正在调用API (.NET)上的一个方法，它连接了一些字段，现在我需要在react表列中显示这个连接字段。
在API中，我尝试将/n放在列中，以便它在UI上呈现一条新行(在react表中)。但没有运气。示例:我需要显示
此字段是通过添加两个数字10和20来计算的。由于结果大于15，所以不能执行此操作。
在显示的文本中，我想要的是“既然”应该从react表中的新行开始。
我试着把{'\n'}放在“开始”之前，但它没有起作用。有什么办法可以做到吗？
浏览 0提问于2019-03-17得票数 3
我在表单上有两个输入。我正在使用React.js和Twitter Bootstrap。
预期的行为是：
当在两个表单输入字段中键入一个输入时，另一个输入字段不应接受任何输入(或为disabled)。
我使用的是Bootstrap中的FormControl。
我应该如何在这个React.js/Bootstrap设置中实现这一点？
浏览 16提问于2017-07-05得票数 1
回答已采纳
1回答
比方说，我希望窗体上的两个形状并排坐在一起，每个形状恰好占据窗口的50%，当调整窗口大小时，这两个形状的大小也随之调整。我该怎么做呢？
我真正想要的是按比例设置。例如..上述形状中的一种占25%，另一种占75%
动态调整大小非常重要，我不想输入任何代码来实现这一点。
浏览 2提问于2012-08-09得票数 8
回答已采纳
2回答
我在html中有两个表格，并想在它们之间添加间距。虽然我不知道是怎么回事。我在html和css是新手，非常感谢你的帮助。
<div class="test"> <div class="col-12"> <div class="row">
<table><tr><th>Price</th>{% for l in co %}<td>{{l}}</td>{% endfor %}</tr></table>
<ta
浏览 1提问于2020-07-16得票数 1
我从react开始，并试图创建一个具有两个“版本”的卡片:一个是在用户验证他们的配置文件之前，它有一个输入字段应该被禁用，另一个是在用户验证配置文件之后，所以现在应该启用相同的输入字段。我考虑创建输入字段的这两个版本，然后在它们之间切换，这是推荐的方法吗？我需要能够操作两个版本的css和html来区分它们。谢谢。
浏览 1提问于2022-08-03得票数 0
回答已采纳
在我的搜索栏应用程序中，我使用了Input.Search Ant组件。
例如：
import React from 'react';
import { Input } from 'antd';
const SearchBar = ( { loading, searchHandler } ) => (
<Input.Search placeholder="Enter name to search here"
disabled={loading}
onSearch={s
浏览 1提问于2018-02-22得票数 5
回答已采纳
我使用react-hook-forms作为我们的应用程序表单的功能/验证，并使用MUI/Material作为我们的组件库。如果输入具有required属性集，则MUI将自动将required附加到输入标签中，但是，当我们将required属性添加到输入中时，HTML5表单验证优先于使用rules支柱进行react-hook-form验证。
我们如何将这两个概念结合使用，以便MUI在所需字段上附加*，但是react-hook-form的rules验证被应用而不是HTML5 5的验证？
浏览 20提问于2022-11-22得票数 0
1回答
这个是可能的吗？例如，你从模板中选择一个名为“自定义博客主页”的页面，在这个页面的中间有两个部分，一个是一组非常具体的博客被拉进来和样式，另一个是进来的推特列表。这两个部分并排在页面的中心。
上面有一个滑块(由主题定义)和一些用户输入内容，下面是用户输入页面的库。
从本质上说，the_content部分将被分成两部分。
我只是不知道如何处理这一点，不管用户做什么，必须始终在页面的中心有这两个部分，用户不能编辑它们，它们可以将内容放置在上面和下面。
我会为上面和下面分别创建一个元框，然后通过编程创建页面吗？
浏览 0提问于2015-01-29得票数 0
4回答
例如，可以在输入字段的placeholder属性中使用React图标吗？
如果是，有人能给我举个例子吗？
我是这样做的，但不是图标，而是占位符中的对象。
var emailIcon = <FaEnvelopeO size={10} />;
<Field
placeholder={emailIcon}
name="email"
type="text"
component={this.renderField}
/>
浏览 7提问于2017-09-11得票数 1
回答已采纳
4回答
在按钮点击，我显示一个对话框，其中有输入字段。我想在输入字段中自动对焦。我使用的是资料UI组件对话框& OutlinedInput
const SearchIdDialog: React.FC = () => {
const [openSearchId, setOpenSearchId] = React.useState<boolean>(false);
React.useEffect(()=> {
inputRef.current?.focus();
}, [openSearchId]);
const handleClose = (
浏览 6提问于2022-06-24得票数 1
回答已采纳
我已经在这个小东西上转了好几个小时了。我有个div。在这个div中，我希望右边(并排)有两个按钮，行的其余部分由一个输入字段填充。我已经尝试了无数的CSS选项组合，但我无法弄清楚。
我需要item1和item2并排并排，占用父div的整个宽度。CSS大师有什么想法吗？谢谢！！
<div style="width: 50%; border: 1px solid black; height: 300px;">
<br/>
<div style="width: 100%">
<input id
浏览 7提问于2015-08-26得票数 5
回答已采纳
我正在尽我所能在我的面板上移动我的文本字段和标签，使它们处于一个好的位置，这样它看起来很整洁。我想要我的标签，就在我的文本字段旁边。
然而，我只能通过修改GridBagConstraints.gridx/gridy来实现这一点，即使这样，我仍然无法将它们并排在一起，这真的让我很沮丧。
有没有什么代码可以并排附加这两个组件，而不必总是更改gridx/gridy数字？
下面是我的代码：
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
浏览 0提问于2016-10-31得票数 0
我有一个react组件，由一个输入字段和一个按钮组成。单击按钮时，我希望运行一个也是从父控制器继承的更新函数。在react文档中，它们有一个onchange处理程序附加到这个输入，并使用onchange事件对象获得输入的新值。然而，在我的例子中，我得到一个事件对象描述按钮，而不是输入字段。通过单击句柄访问新输入字段值的正确方法是什么？
class QuoteButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(t
浏览 2提问于2018-06-21得票数 0
回答已采纳
我正在使用一个弹出的创建反应应用程序项目开发一个铬的扩展。我需要两个独立的javascript文件。一个用于弹出页面，另一个用于后台脚本。当后台脚本在后台运行时，弹出页面是react项目。
当我使用命令npm build构建项目时
它为我提供了以下构建文件夹：
输入和输出文件分别突出显示为黄色和红色。
但我有以下问题：
从来不编译background.js入口点。Webpack给出了输入文件中所写的输出。
在es6文件中编写background.js代码会给我带来编译问题(“未能缩小”)
我试图通过修改配置文件夹中的paths.js文件来解决这个问题：
然后在w
浏览 1提问于2018-04-15得票数 1
回答已采纳
因此，从本质上讲，我希望在更改或添加到原始数组时跟踪React组件中的状态值。听起来很含糊，但让我举个例子来解释一下。 我有一个组件，它基本上呈现此数据格式的数组 [
{
Name: '',
Age: '',
Gender: ''
}
] 该组件与以下内容类似 import React, { useState } from 'react';
import jsonData from './json-data.js'
export default function Search
浏览 24提问于2021-08-16得票数 0
1回答
我正在尝试使用redux在react中获得以下行为。我有两个并排的组件，每个组件都有一个显示相同值的<input>文本字段。当我编辑其中一个字段时，我希望分派一个操作并让redux store更新这两个组件中应用程序的状态
跟体式应用一模一样。
当我编辑左边的字段时，也会更新右边的字段
当我编辑右边的字段时，它也会更新左边的文本字段
我只能让它以一种方式工作，而不是两种方式。我使用<input>文本字段的value属性并保留一个状态变量来更新<input>文本字段，如中所述。我在一个组件中有状态变量，另一个组件直接监听属性。
我尝试使用defau
浏览 0提问于2016-11-02得票数 0
我想创建一个对话框消息，它集中在按钮或文本输入上，就像html中的必需属性一样，但我想创建它是自定义的，这在react原生中是可能的吗？ 就像这个 ?
浏览 10提问于2020-12-12得票数 0
我并排放置了两个div，一个包含在logo中，第二个包含文本字段。当我以更大的分辨率查看这个页面时，一切都很好。但是，当我调整窗口大小时，第二个div也会变得不稳定，并低于第一个div。
但我希望他们在任何情况下都能并排待在那里。请提供这方面的代码解决方案。
浏览 0提问于2009-05-21得票数 0
3回答
我需要创建布局(下面的布局图像链接)
我想有垂直对齐的DIV框，以及图像和文本的空间。
顶部我想要的DIV框有在左边的文本字段和左边的图像。
我想把边栏分成两部分，顶部和底部
底部我想有2个div框并排垂直对齐与左侧的图像和右手边的文本
DIV框的高度应根据文本输入进行扩展，如果有更多的文本行(例如:在顶部的DIV框中)，则应向下按下两个并排的DIV。
2x2并排的div框也是如此。
此外，我应该能够添加在底部的2x2 div框根据我的要求
请帮助我创建这个布局。
浏览 5提问于2016-05-26得票数 0
2回答
在这里，在我的代码中，名字和姓氏字段并排放置，如何为我尝试但没有得到正确的两个字段编写验证。我附加了图像和我的代码如下
jQuery代码：
jQuery(function(){
jQuery("#fName").validate({
expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;",
message: "Please enter the First
浏览 16提问于2016-08-04得票数 1
回答已采纳
我没有其他特殊事件onChange，所以我需要简化代码，只处理表单标记上的事件onSubmit。
我在React中的类型记录中创建了一个简单的表单，当我单击Submit时，我想在控制台中记录输入框的值。但当我这么做的时候我会犯个错误。
import React from "react";
const handleSubmit =(event:React.FormEvent<HTMLFormElement>) =>{
event.preventDefault();
console.log(event.currentTarget[0].value
浏览 3提问于2022-03-24得票数 0
回答已采纳
2回答
在本页中：
如果您将Go！button更改为标签(使用Chrome检查器)，您会注意到Go！按钮不再位于输入字段的顶部：
(边界不是一个在另一个上面，而是并排的。)
为什么这和如何使这两个元素成为一个之上的另一个呢？
浏览 3提问于2016-04-07得票数 2
回答已采纳
我有困难，使用反应钩形式的材料-用户界面。
我准备了一个。
import { TextField } from "@material-ui/core";
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
interface IMyForm {
vasarlo: string;
}
export default function App() {
const {
handleSub
浏览 6提问于2021-04-08得票数 6
回答已采纳
我正在为一个使用ES6 JavaScript构建的开源React/Redux应用程序做出贡献。我是React/Redux的新手，所以我遇到了一些麻烦。
我有一个父类，它呈现两个不同的React组件。第一个组件包含一些关于事件的输入字段(称为NewShift)。第二个组件是呈现这些事件的日历(称为Index)。
一旦用户填写了输入字段并按下了第一个组件中的按钮，我希望能够在第二个组件中重新呈现日历。如果重新呈现函数在日历组件中，我如何从输入字段组件(两个子组件)调用它。
浏览 1提问于2019-03-29得票数 0
我试图在我的README.md中显示两张照片的比较，这就是为什么我想把它们并排显示。是当前放置这两幅图像的方式。我想展示两个单色方案并排，而不是顶部和底部。非常感谢您的帮助，谢谢！
浏览 26提问于2014-06-20得票数 376
回答已采纳
2回答
我有两个div并排的。左边是图像，右边是输入。
图像根据用户上传的内容而变化。
我如何垂直中心对齐图像和输入？我想要输入显示垂直中心到图像。
img和输入都有自己的容器：
<div class="img-container">
<div class="data-container">
Fiddle：
浏览 2提问于2014-05-27得票数 0
回答已采纳
如何读取所有输入的值，用逗号分隔。在这里，我尝试使用dangerouslySetInnerHTML设置html。html包含三个输入域，我如何读取在所有三个输入域中输入的值。
假设我在第一个输入字段中输入了24，然后在第二个输入字段中输入了12，在第三个输入字段中输入了2。所以现在我想要保存状态变量中的所有值，用逗号分隔，即
24,12,2
import React, { useState } from "react";
import "./styles.css";
const data = {
htmltag: `<div><p>
浏览 4提问于2020-07-01得票数 1
1回答
有人知道在Drupal Webform中并排显示两个表单域的最简单方法吗？我正在使用Webform模块创建表单，但很明显，当您创建它时，所有字段都会一个接一个地列出。我有两个字段，我想要并排显示。这个是可能的吗？哦，我正在使用Drupal6，以备不时之需。
浏览 0提问于2012-11-07得票数 0
回答已采纳
2回答
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
</div>
上面是我的html代码，InputBox是react的一个组件，它在字段集之间嵌套了
浏览 8提问于2022-09-16得票数 1
当我在一个输入字段中输入值时，它也出现在另一个输入字段中，我将面临一个问题。
在截图中，我开始输入底部字段，但数字也开始出现在顶部字段中。
如果我只在顶部输入字段输入值，它也会出现在底部，也会发生这种情况。就像它是我在任何领域投入的价值的两倍。
码
import React from "react";
import { Button, Form } from "react-bootstrap";
const symbols = [
"ADABTC",
"AIONBTC",
"ALGOBTC"
浏览 4提问于2020-07-27得票数 0
1回答
在我的winforms应用程序中，我有到mysql数据库的大型datagridview链接。我想使用以下三个数据库列值来筛选我的数据视图
" username "
" loannumber "
" date " ( i stored date in database using datetimepicker.text value )
我实现了以下代码：
private void button1_Click(object sender, EventArgs e)
{
try
{
DataView DV =
浏览 4提问于2014-09-09得票数 1
回答已采纳
1回答
我使用react创建了一个简单的表单。我有两个文本字段，类型&年份，和一个下拉，即汽车。汽车下拉列表使用来自API的值填充。用户输入前两个字段的文本值，并从下拉菜单中选择car值并点击add。我有另一个post API来捕获这个值。我可以存储和设置文本框的值，但是对于下拉列表，car的值没有被捕获，我得到了一个空值。如何像对其他两个文本框一样存储汽车的值？
import { useHistory } from "react-router-dom";
import axios from "axios";
import React,{useState,use
浏览 1提问于2021-12-12得票数 0
我正在创建一个具有条件流的react表单。例如，当选择一些select选项时，可能隐藏两个输入字段。创建基于select选项的状态并使输入元素的可见性取决于当前状态是一个好主意吗？或者我是否应该在输入元素中添加参考信息，并使select原因成为一个更改事件，用于操作输入的可见性？
浏览 4提问于2015-02-03得票数 0
回答已采纳
我有一个webview，是一个react应用程序(不是react原生的)。这是一个具有两个输入字段和一个固定页脚的登录页面。
当输入被聚焦时，页脚出现，并与隐藏密码输入字段的输入字段重叠。
我该怎么做才能让页脚留在键盘下面？
浏览 0提问于2017-11-07得票数 1
1回答
您能告诉我如何在react中聚焦输入日期字段吗?我正在使用语义https://www.npmjs.com/package/semantic-ui-calendar-react的一个插件 我想将日期输入字段集中在按钮上，单击此处是我的代码。下面是我的代码https://codesandbox.io/s/3l414mno5 focus = () => {
console.log(this.a);
this.a[0].onFocus();
// this.inputRef.focus()
}; 为什么输入字段中没有焦点？有什么新消息吗？
浏览 10提问于2019-03-05得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
