Javascript 连接多个输入类型编号

我需要做这样的东西。6输入字段类型编号。 每个标签都有

min

和

max

。问题是，如果我把红色放在0-50，那么黄色不能从49-70，它需要根据周围的数字自动增加或减少，所以它总是一个接一个的？我在用React

是否有一些小部件用于此目的，或者有一种连接多个数字输入的方法

---

您可以在状态中手动设置输入值，并触发事件以根据标签更改来更改这些属性

通过上一个或下一个输入值设置最小值和最大值后

例如：

class YouClass extends React.Component {

  constructor(props){
     super(props)
    this.state = {
     redMaxValue: 50,
     yellowMinValue: 51,
     yellowMaxValue: 70,
     greenMinValue: 71,
   }
 }


 onChangeMaxRed = e =>{
    this.setState({redMaxValue : e.target.value});

    if(e.target.value >= this.state.yellowMinValue){
      this.setState({yellowMinValue: e.target.value +1});
    }
 }






render(){

 return(){

<div>
   <input type="number" value="0" disabled />
   <input type="number" value={this.state.redMaxValue} min="1" max={this.state.yellowMinValue} onChange={this.onChangeMaxRed} />


  <input type="number" value={this.state.yellowMinValue} min={this.state.yellowMaxValue -1} max={yellowMaxValue -1} />
  <input type="number" value={this.state.yellowMaxValue}" min={this.state.yellowMinValue + 1}  max={redMinValue}/>




   <input type="number" value={this.state.greenMinValue} min={this.state.yellowMaxValue} max={99} />
    <input type="number" value="100" disabled />

</div>

 }   

}

}

类YouClass扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
redMaxValue:50，
黄敏值：51，
黄色最大值：70，
绿色价值：71，
}
}
onChangeMaxRed=e=>{
this.setState（{redMaxValue:e.target.value}）；
如果（e.target.value>=this.state.yellowMinValue）{
this.setState（{yellowMinValue:e.target.value+1}）；
}
}
render（）{
返回（）{
如果您希望支持键盘输入，则必须更新数字输入的
onBlur
处理程序中的范围，并更改
onChange
中的输入值。下面是一个自定义
InputNumber
组件的示例，该组件隐藏了此onBlur/onChange详细信息：


类InputNumber扩展了React.Component{
状态={
值：this.props.value
}
onChange=e=>{
this.setState（{value:+e.target.value}）；
};
onBlur=e=>{
this.props.onChange（this.state.value）；
};
组件将接收道具（下一步）{
if（nextrops.value！==this.state.value）{
this.setState（{value:nextrops.value}）；
}
}
render（）{
返回；
}
}
类Demo扩展了React.Component{
状态={
范围：[[1,50]，[51,70]，[71,100]]
};
render（）{
const{rangeRed，rangeYellow，rangeGreen}=this.state；
常数控制=[
此.range（'Red Scoring range'，'Red'，0），
此范围（'黄色评分范围'，'黄色'，1），
此范围（'绿色评分范围'，'绿色'，2）
];
返回{controls}；
}
范围（标签、颜色、idx）{
const{ranges}=this.state；
返回(
{label}
到
);
}
onChange=（idx，isMin）=>v=>{
const ranges=[…this.state.ranges]；
const min=isMin？范围[idx-1<0？0:idx-1][0]+2:范围[idx][0]+1；
const max=isMin？ranges[idx][1]-1:ranges[（idx+1）%ranges.length][1]-2；
v=数学最小值（数学最大值（最小值，v），最大值）；
如果（！isMin&&idx0）{
范围[idx][0]=v；
范围[idx-1][1]=v-1；
}
this.setState（{ranges}）；
}
}
ReactDOM.render（，document.getElementById（'app'）；
：根目录{
--子弹大小：15px；
}
* {
颜色：#555；
}
.子弹{
显示：内联块；
高度：var（--子弹大小）；
宽度：var（--项目符号大小）；
边界半径：var（--项目符号大小）；
}
.red{背景：red；}
.yellow{背景：黄色；}
.green{背景：绿色；}
td{padding:5px；}
输入{
宽度：50px；
填充物：5px；
边框：实心1px#ccc；
边界半径：3px；
}

Hi，你是一个接一个地上下移动数字还是用键盘上下移动数字？两者都可以。通过键盘和鼠标一个接一个地移动。嗨，乔娃，谢谢你的努力。我会看一看。我尝试了代码片段，发现了两个问题。如果我开始减少，例如red max，yellow min不会减少。同样，例如red max和yellow min永远不可能是相同的。@Igor Vuk，哦，我以为你只想在发生碰撞时更新相邻的范围……我的错，我会更新我的answer@Igor-Vuk，我更新了答案，你能看一下吗？@jo va谢谢。我仍然看到一些问题。1.如果红色最大值是20，黄色最小值应该是21，而不是20。2.如果黄色最小值是20，并且黄色最大值为25，则黄色最小值应能达到24，且不高于3。红色最小值和绿色最大值应为disabled@jo-va谢谢。在键盘输入中，我和某人有一些问题，例如，输入超过100的黄色最大值，它应该自动比红色最小值低一个，但谢谢你，我设法做到了我需要的迪德。