- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要做这样的事情。 6 个输入字段类型编号。每个标签都有 min
和 max
。问题是如果我把红色 0 - 50 然后黄色不能从 49-70 它需要自动增加或减少取决于它周围的数字所以它总是一个接一个?我正在使用 React。
是否有一些小部件或连接多个数字输入的方法?
最佳答案
如果您想要支持键盘输入,您将必须在 onBlur
处理程序中更新数字输入的范围,并在 onChange
中更改输入值。下面是一个带有自定义 InputNumber
组件的示例,它隐藏了这个 onBlur/onChange 细节:
class InputNumber extends React.Component {
state = {
value: this.props.value
}
onChange = e => {
this.setState({ value: +e.target.value });
};
onBlur = e => {
this.props.onChange(this.state.value);
};
componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.state.value) {
this.setState({ value: nextProps.value });
}
}
render() {
return <input
type='number'
{...this.props}
value={this.state.value}
onChange={this.onChange}
onBlur={this.onBlur}
/>;
}
}
class Demo extends React.Component {
state = {
ranges: [[1, 50], [51, 70], [71, 100]]
};
render() {
const { rangeRed, rangeYellow, rangeGreen } = this.state;
const controls = [
this.range('Red Scoring Range', 'red', 0),
this.range('Yellow Scoring Range', 'yellow', 1),
this.range('Green Scoring Range', 'green', 2)
];
return <table className='controls'>{controls}</table>;
}
range(label, color, idx) {
const { ranges } = this.state;
return (
<tr className='control-row'>
<td className='label'>{label}</td>
<td><div className={color + ' bullet'}></div></td>
<td>
<InputNumber
value={ranges[idx][0]}
onChange={this.onChange(idx, true)}
min={ranges[idx-1 < 0 ? 0 : idx-1][0] + 2}
max={ranges[idx][1] - 1}
disabled={idx === 0} />
</td>
<td>to</td>
<td>
<InputNumber
value={ranges[idx][1]}
onChange={this.onChange(idx, false)}
min={ranges[idx][0] + 1}
max={ranges[(idx+1) % ranges.length][1]-2}
disabled={idx === ranges.length-1} />
</td>
</tr>
);
}
onChange = (idx, isMin) => v => {
const ranges = [...this.state.ranges];
const min = isMin ? ranges[idx-1 < 0 ? 0 : idx-1][0] + 2 : ranges[idx][0] + 1;
const max = isMin ? ranges[idx][1] - 1 : ranges[(idx+1) % ranges.length][1]-2;
v = Math.min(Math.max(min, v), max);
if (!isMin && idx < ranges.length-1) {
ranges[idx][1] = v;
ranges[idx+1][0] = v+1;
} else if (isMin && idx > 0) {
ranges[idx][0] = v;
ranges[idx-1][1] = v-1;
}
this.setState({ ranges });
}
}
ReactDOM.render(<Demo />, document.getElementById('app'));
:root {
--bullet-size: 15px;
}
* {
color: #555;
}
.bullet {
display: inline-block;
height: var(--bullet-size);
width: var(--bullet-size);
border-radius: var(--bullet-size);
}
.red { background: red; }
.yellow { background: yellow; }
.green { background: green; }
td { padding: 5px; }
input {
width: 50px;
padding: 5px;
border: solid 1px #ccc;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
如果您想要瞬时更新范围并且不关心键盘输入,则直接在 onChange
处理程序中更新范围:
class Demo extends React.Component {
state = {
ranges: [0, 50, 70, 100]
};
render() {
const { rangeRed, rangeYellow, rangeGreen } = this.state;
const controls = [
this.range('Red Scoring Range', 'red', 0),
this.range('Yellow Scoring Range', 'yellow', 1),
this.range('Green Scoring Range', 'green', 2)
];
return <table className='controls'>{controls}</table>;
}
range(label, color, idx) {
const { ranges } = this.state;
return (
<tr className='control-row'>
<td className='label'>{label}</td>
<td><div className={color + ' bullet'}></div></td>
<td>
<input
type='number'
value={ranges[idx] + 1}
onChange={this.onChange(idx, true)}
max={ranges[idx+1] - 1}
disabled={idx === 0} />
</td>
<td>to</td>
<td>
<input
type='number'
value={ranges[idx+1]}
onChange={this.onChange(idx+1, false)}
min={ranges[idx] + 1}
disabled={idx+1 === ranges.length-1} />
</td>
</tr>
);
}
onChange = (idx, isMin) => e => {
const ranges = [...this.state.ranges];
const value = isMin ? +e.target.value - 1 : +e.target.value;
if (isMin && value > ranges[idx - 1] + 1 && value < ranges[idx + 1] + 1)
ranges[idx] = value;
if (!isMin && value < ranges[idx + 1] - 1 && value > ranges[idx - 1] + 1)
ranges[idx] = value;
this.setState({ ranges });
};
}
ReactDOM.render(<Demo />, document.getElementById('app'));
:root {
--bullet-size: 15px;
}
* {
color: #555;
}
.bullet {
display: inline-block;
height: var(--bullet-size);
width: var(--bullet-size);
border-radius: var(--bullet-size);
}
.red { background: red; }
.yellow { background: yellow; }
.green { background: green; }
td { padding: 5px; }
input {
width: 50px;
padding: 5px;
border: none;
border:solid 1px #ccc;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
关于javascript - 连接多个输入类型编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55230397/
我使用 Faker gem 来播种某些数据。我怎样才能设置最大。假公司名称的长度,如何设置假号码的范围? name = Faker::Company.name 这里我想包括最大长度,因为名称对最大长
我试图实现一种方法,在该方法中我创建一个记分板(while 循环)并按某个数字字段(点)对获取的结果进行排序。但我需要实现的是如下 rank----username--point 1st------t
如何在 ListView (vsReport) 中对项目进行编号?现在我有类似的东西: Item := ListView1.Items.Add; Item.Caption :=inttostr(Ite
我正在尝试使用几个按钮在红色和绿色之间切换,我已经浏览了 Jquery 文档,但我似乎无法弄清楚这个。 您可以在我的代码片段中看到,当我单击按钮时,所有按钮都会变成不同的颜色。 而且必须有一种更短的方
是否可以在 GROUP_CONCAT 中进行编号 喜欢 如果,来自 GROUP_CONCAT(empnam SEPARATOR ', ') 我有一套, 我需要 我试过跟随,但没有得到想要的结
在 Linux 中,如何使用用户指定的事件编号创建输入事件接口(interface)并将其映射到特定的设备事件? 我正在使用 gpio-keys 驱动程序来翻译键盘上的按键操作。我定义了要在我的板配置
对于低级应用程序,我在编译时将某种索引定义为一种类型: template class Idx{ using TYPE = T_; static const int IDX = IDX_; }
请问如何设置这种格式的编号: 1) number 1 2) number 2 3) ... 在 HTML 中? 我只找到了一种获取这种格式的方法: 1. number 1 2. number 2 3.
对于我的研究,我需要很少的数据,其中之一是前一次提交的 SHA 编号,即如果我提供特定的提交编号/SHA 编号,我应该能够获得它之前的 SHA 编号。 帮我用 git 命令来获得相同的结果。 最佳答案
我需要询问何时按下数字 1 键,而不是在数字键盘上,而是在 Q 上方的数字 1(试图使这尽可能清楚)。 我已经浏览了 Keys 数组上所有可用的键,但没有一个匹配我正在寻找的键。 有没有办法做到这一点
我正在尝试使用 NAnt 任务设置构建服务器。我有几个想要构建的 Git 存储库,但我在结果的版本控制方面遇到了问题。 如何对库 (dll) 进行版本控制,以便每个构建都使用一个数字来表示每个版本?我
我有一个如下所示的表格: +-------+--------+--------+ | Grp | Party | Member | +-------+--------+--------+ | F
我正在使用 SQL Server 2008。我在查询中返回了这些数据,看起来非常像按 Day 和 ManualOrder 排序的... ID Day ManualOrder Lat L
区域:Silverlight 中的文本框 问题:我需要知道当前编辑的是什么“行号”。 我试过:作为一种解决方法,我尝试使用 textBox.Split("\r") 进行拆分,并计算 Regex 上具有
提前致歉,我不确定如何将 null 值添加到 pandas 数据框,所以我在列表中放置了“无”。我有一个具有以下值的数据框: None, None, 50,60,70,80,90,None,None,
我的应用程序中有一个标签,其中会带有徽章编号,该标签基于3个不同时间发生的3种不同操作。我知道如何使用以下方式设置标签栏标志: [[[[[self tabBarController] tabBar]
有谁知道为什么我们的供应商需要我们的 sku 编号来开发新应用程序? 我们自己将应用程序带入应用程序商店,也许我错了,但构建应用程序或将其上传到商店不需要 sku - 它仅在 iTunes 中连接而不
这个问题已经有答案了: Rationale for Matcher throwing IllegalStateException when no 'matching' method is called
我使用[[UIApplication sharedApplication] setApplicationIconBadgeNumber:0]清除徽章编号。它工作正常,但同时删除了远程通知。 还有许多其
我有一个待办事项列表应用程序,我想在图标徽章中显示未完成任务的数量。 我的问题是:我是否应该在用户每次在应用程序中删除/添加新任务时更新徽章编号,还是仅在应用程序即将进入后台模式时更新徽章编号? 最佳
我是一名优秀的程序员,十分优秀!