当输入类型从“文本”更改为“类型”时，如何修复 Form.control 输入宽度？答案

【问题标题】：How to fix Form.control input width which changes when input type changes from "text" to "type"?当输入类型从“文本”更改为“类型”时，如何修复 Form.control 输入宽度？
【发布时间】：2019-04-29 17:30:17
【问题描述】：

在页面加载时，输入有type = "text"，因为我想显示占位符文本。我在输入上添加了功能，在焦点上，输入类型应该是type = "time"。

但是，在更改为 type =" time" 时，输入的宽度也会发生变化。我想保持与input = "text" 相同的宽度。

这是我的代码：

this.state = {type: 'text'}; 

onFocus() {this.setState({ type: 'time' });}
onBlur() {this.setState({type: 'text'});

<Form.Group>
       <Form.Label >From</Form.Label>
       <Form.Control type={this.state.type} onFocus={this.onFocus} onBlur={this.onBlur} placeholder="Shop opens" />
</Form.Group>

【问题讨论】：

您的问题不清楚，请描述更多
在页面加载时，输入的 type = "text" 因为我想显示占位符文本。我在输入上添加了功能，在焦点上，输入类型应该是 type = "time"。但是在更改为 type =" time" 时，输入的宽度也会发生变化。我想保持与 input = "text" 上的宽度相同。
请在不删除代码格式的情况下再次编辑您的问题。正确格式化您的新信息。
已格式化，请立即查看。

标签： css reactjs sass

【解决方案1】：

在您的 scss 或 css 文件中添加以下 css 规则，该规则将控制您的任何时间点的输入宽度：

custom-input-width {
  width : 250px !important; // you can set as per your requirement
}

在你的输入中应用这个 css 规则：

<input className="custom-input-width" />

【讨论】：

感谢您的帮助 :) 。我解决了这个问题，这是由于表单宽度在 onClick 发生了变化，因此它的组件宽度也在变化。