- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有三个相同的输入字段,它们被屏蔽为电话格式文本。所有输入字段都完全相同(电话输入字段)。现在我有三种状态,具有三个 handlePhoneNumber
方法。这不是一个好的做法,因为所有这些字段基本上都是完全相同的。
我使用的 UI 库是 Material-UI
,我使用 React-Text-Mask
库作为我的 mask 组件。
到目前为止我所拥有的:
this.state = {
textmask: "( ) - ",
textmask2: "( ) - ",
textmask3: "( ) - ",
}
RenderTextMask(props){
const { inputRef, ...other } = props;
return (
<MaskedInput
{...other}
ref={inputRef}
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
guide={true}
showMask
/>
);
}
我的 OutlienInput 组件(来自 Material-UI),如下所示:
<div>
<FormLabel>Phone</FormLabel>
<div>
<OutlinedInput
value={this.state.textmask}
onChange={this.handlePhoneNumber}
inputComponent={this.RenderTextMask}
labelWidth={200}
/>
</div>
</div>
<div>
<FormLabel>Phone</FormLabel>
<div>
<OutlinedInput
value={this.state.textmask2}
onChange={this.handlePhoneNumber2}
inputComponent={this.RenderTextMask}
labelWidth={200}
/>
</div>
</div>
<div>
<FormLabel>Phone</FormLabel>
<div>
<OutlinedInput
value={this.state.textmask3}
onChange={this.handlePhoneNumber3}
inputComponent={this.RenderTextMask}
labelWidth={200}
/>
</div>
</div>
问题是什么:到目前为止,我需要为我拥有的每个电话字段提供一种状态和一种处理方法。正如您所看到的,随着应用程序的增长,代码实际上并不可维护。
我想要实现的目标:我想要有一种状态和一种处理方法来处理所有三个字段(将来可能有更多字段)。或者比我现在拥有的更好的东西。所以将来,如果我必须添加更多字段,我不必每次都修改状态并添加新方法。
到目前为止我已经尝试过我尝试将数组测试掩码作为状态。问题是因为我使用 react-text-mask
作为我的掩码库。它只接受字符串。如果我把“textmask
”改成字符串数组,就会提示错误。
最佳答案
稍微猜测一下,我会说数组是自然的方法。只有部分代码,我可能是错的。
IMO,你可以这样做:
this.state = {
textmasks: ["( ) - ", "( ) - ", "( ) - "]
}
正如您已经提到的。现在,在您的渲染方法中,如下所示:
const phoneInputs = [];
for (let i = 0; i < 3; i++) {
phoneInputs.push(<div key={i}>
<FormLabel>Phone</FormLabel>
<div>
<OutlinedInput
value={this.state.textmasks[i]}
onChange={this.handlePhoneNumber.bind(this, i)}
inputComponent={this.RenderTextMask}
labelWidth={200}
/>
</div>
</div>);
}
因此,为了使其正常工作,您可以使用 this.state.textmasks[i] (输入索引)来捕获适当的掩码。另外,要使用 this.handlePhoneNumber 方法,您需要绑定(bind)索引“i”。
我写了“this.state.textmasks[i]”和“this.handlePhoneNumber.bind(this, i)”,只是因为我假设你的实现取决于电话号码输入索引(不仅存储到适当的地方,但也要做一些额外的逻辑)。
如果您仅使用一个文本掩码并且仅存储电话号码列表(我假设在handlePhoneNumber方法中),那么您很可能应该:
const textMask = "( ) - ";
this.state = {
phoneNumbers: []
};
这样,textMask甚至不会依赖于状态/索引(最有可能的是您的业务案例),并且phoneNumbers将在onChange触发器(handlePhoneNumber方法)中处理,该触发器将index作为第一个参数,因此它可以更新适当的phoneNumbers索引。
关于javascript - react : Save multiple similar inputfields in one state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53751273/
我正在尝试测试密码是否被遮盖,这就是我要走的路,但似乎 flutter 可以读取文本,即使它被遮盖了也是如此。 testWidgets('password must be hidden', (Wid
如果页面为空,我想阻止用户访问下一页 输入字段。当该字段为空并且我单击按钮时,警报确实会显示,但我可以单击“确定”,然后进入下一页。 window.onload = function(){
我遇到了一个非常特殊的问题。用文字解释它对我来说很困难。 在此图中,“1”下方“X”左侧有一个输入字段。为了标记数字并立即更改整个值,许多人会执行以下操作: 将鼠标放在“1”下方“X”的位置 按下鼠标
我正在 Unity 中设置登录系统。它通过 php 连接到 mysql 后端,所以我使用的是 WWWForm。密码字段的内容类型设置为密码,因此它将屏蔽用户的输入。我想发送字段的实际值而不是屏蔽值。
我有一个加载远程网页 ( this one ) 的 WebView,其 HTML 不受我控制。在那个页面上,有一个电子邮件字段是必需的,也许它有电子邮件验证。 当我点击该电子邮件字段以输入电子邮件地址
我对 Safari 上的物化有疑问。 在 chrome 上它工作正常但在 Safari 上我有这个问题: 有没有其他人有同样的错误? H 最佳答案 问题是我没有使用 Materialise 的正确语法
我正在使用 bootstrap 创建两列布局。我想要第一列中的表格。当我减小容器的大小时,输入文本字段不会重新调整大小并最终脱离列。为什么输入字段会拆分列? 这是此行为的示例:
我正在制作一个打字游戏,用户可以在其中输入落在屏幕上的单词,并且我在顶部有一些按钮,当用户按下它们时,它们会充当通电(核弹、卡住等...)。 现在,当用户单击屏幕顶部的电源按钮之一时,键盘会在 But
我需要将阿拉伯文本粘贴到输入字段中,我可以为 mac 处理它,因为有 if (((Input.GetKey(KeyCode.RightCommand) || Input.GetKey(KeyCode.
我有一种情况需要以编程方式关注 InputField (例如响应按钮按下)。 我正在使用 Focus.moveTo功能;但是,即使 InputField 已获得焦点(出现闪烁的光标),键盘也不会出现。
我想知道是否有人知道如何在按下保存按钮“提交”后清除所有输入字段?当我返回页面时,我的值(value)观仍然存在。 这是我正在使用的代码。 @page "/testform" @inject Blaz
我想在ReactJS onChange中在输入类型文本字段中执行一个附加函数,然后渲染函数是: render(){ return (
我有一个 v-for 循环,它显示每种成分的输入字段,在更改该输入字段时,我想更新成分对象上的值。 我正在尝试发送对我想要更改的对象的引用,以及它必须更改为的输入字段的值。以下
我有一个 InputField,我将它用作搜索栏。我无法使用 OnValueChanged 自动搜索,因为最初,如果我输入任何字符,如 a,文本字段将为 "", inputField.text 仍然是
我有一个绑定(bind)到多选自定义字段的 inputField。 我想验证用户从列表中最多选择 3 个项目,并且我想在用户立即选择第四个项目时(而不是在提交表单时)显示一条消息或提醒。我发现 act
那么如何获取输入字段(文本框)或 Unity3D 中文本的值 这是我在 C# 中尝试过的 public void UserInput (string UserInput) { UserName
我想从 UI InputField 中检索文本,但我不确定该怎么做。 最佳答案 您可以先以某种方式获取对 gameObject 的引用,然后从中获取 InputField 组件并获取组件的 text
我有一个 scikit 模型,正在使用 JPMML 在我的 java 应用程序中使用。我尝试使用训练期间使用的列的名称来设置 InputFields,但“inField.getName().getVa
我目前正在 salesforce.com 上使用带有自定义扩展的 apex 表单开发表单。 该表格本身旨在预订具有最大空位数量的旅游。提交表单后,我需要检查以确保在表单中选择的日期和时间仍有可用的空位
我正在基于 Bootstrap 模板构建站点(参见 http://ironsummitmedia.github.io/startbootstrap-agency/)我遇到的问题是,在我的移动设备 (i
我是一名优秀的程序员,十分优秀!