gpt4 book ai didi

javascript - 连接多个输入类型编号

转载 作者:行者123 更新时间:2023-11-30 14:06:47 26 4
gpt4 key购买 nike

我需要做这样的事情。 6 个输入字段类型编号。每个标签都有 minmax。问题是如果我把红色 0 - 50 然后黄色不能从 49-70 它需要自动增加或减少取决于它周围的数字所以它总是一个接一个?我正在使用 React。

是否有一些小部件或连接多个数字输入的方法?

input type text

最佳答案

如果您想要支持键盘输入,您将必须在 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com