- 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/
我知道这个问题可能已经被问过,但我检查了所有这些,我认为我的情况有所不同(请友善)。所以我有两个数据集,第一个是测试数据集,第二个是我保存在数据框中的预测(预测值,这就是没有数据列的原因)。我想合并两
在 .loc 方法的帮助下,我根据同一数据框中另一列中的值来识别 Panda 数据框中某一列中的值。 下面给出了代码片段供您引用: var1 = output_df['Player'].loc[out
当我在 Windows 中使用 WinSCP 通过 Ubuntu 连接到 VMware 时,它提示: The server rejected SFTP connection, but it lis
我正在开发一个使用 xml web 服务的 android 应用程序。在 wi-fi 网络中连接时工作正常,但在 3G 网络中连接时失败(未找到 http 404)。 这不仅仅发生在设备中。为了进行测
我有一个XIB包含我的控件的文件,加载到 Interface Builder(Snow Leopard 上的 Xcode 4.0.2)中。 文件的所有者被设置为 someClassController
我在本地计算机上管理 MySQL 数据库,并通过运行以下程序通过 C 连接到它: #include #include #include int main(int argc, char** arg
我不知道为什么每次有人访问我网站上的页面时,都会打开一个与数据库的新连接。最终我到达了大约 300 并收到错误并且页面不再加载。我认为它应该工作的方式是,我将 maxIdle 设置为 30,这意味着
希望清理 NMEA GPS 中的 .txt 文件。我当前的代码如下。 deletes = ['$GPGGA', '$GPGSA', '$GPGSV', '$PSRF156', ] searchquer
我有一个 URL、一个用户名和一个密码。我想在 C# .Net WinForms 中建立 VPN 连接。 你能告诉我从哪里开始吗?任何第三方 API? 代码示例将受到高度赞赏... 最佳答案 您可以像
有没有更好的方法将字符串 vector 转换为字符 vector ,字符串之间的终止符为零。 因此,如果我有一个包含以下字符串的 vector "test","my","string",那么我想接收一
我正在编写一个库,它不断检查 android 设备的连接,并在设备连接、断开连接或互联网连接变慢时给出回调。 https://github.com/muddassir235/connection_ch
我的操作系统:Centos 7 + CLOUDLINUX 7.7当我尝试从服务器登录Mysql时 [root@server3 ~]# Mysql -u root -h localhost -P 330
我收到错误:Puma 发现此错误:无法打开到本地主机的 TCP 连接:9200(连接被拒绝 - 连接(2)用于“本地主机”端口 9200)(Faraday::ConnectionFailed)在我的
请给我一些解决以下错误的方法。 这是一个聊天应用....代码和错误如下:: conversations_controller.rb def create if Conversation.bet
我想将两个单元格中的数据连接到一个单元格中。我还想只组合那些具有相同 ID 的单元格。 任务 ID 名称 4355.2 参与者 4355.2 领袖 4462.1 在线 4462.1 快速 4597.1
我经常需要连接 TSQL 中的字段... 使用“+”运算符时 TSQL 强制您处理的两个问题是 Data Type Precedence和 NULL 值。 使用数据类型优先级,问题是转换错误。 1)
有没有在 iPad 或 iPhone 应用程序中使用 Facebook 连接。 这个想法是登录这个应用程序,然后能够看到我的哪些 facebook 用户也在使用该应用程序及其功能。 最佳答案 是的。
我在连接或打印字符串时遇到了一个奇怪的问题。我有一个 char * ,可以将其设置为字符串文字的几个值之一。 char *myStrLiteral = NULL; ... if(blah) myS
对于以下数据 - let $x := "Yahooooo !!!! Select one number - " let $y := 1 2 3 4 5 6 7 我想得到
我正在看 UDEMY for perl 的培训视频,但是视频不清晰,看起来有错误。 培训展示了如何使用以下示例连接 2 个字符串: #!usr/bin/perl print $str = "Hi";
我是一名优秀的程序员,十分优秀!