javascript - 动态设置选择输入值
问题描述
在我正在构建的食品卡车应用程序中,我有一个订单卡组件。在该订单卡组件上,它显示了用户订单中的所有商品以及每个商品的数量。在显示每个项目的计数的位置,我想更改它以呈现选择输入,其中选择的默认值将是用户已经选择的任何计数。然后我希望用户能够使用选择输入来更改计数。
我要更改为选择输入的是顺序中每个项目左侧的计数。例如,此订单中的第一项是鸡肉炸玉米饼。计数为 2。我希望将那里的选择输入动态设置为 2,但如果用户愿意,他们可以按顺序增加或减少鸡肉玉米卷的数量。
这是组件中的代码:
const OrderCard = props => {
const orderCount = props.order.reduce(function(prev, cur) {
return prev + cur.count;
}, 0);
return (
<Card className="order-card-main">
<i class="far fa-times-circle" style={{ position: 'relative', left: '0px', textAlign: 'left', width: '100%', marginTop: '3%', fontSize: '1.5rem' }} onClick={() => props.closeOrderCard()}></i>
<h1 className="order-card-title">Your Order</h1>
<p className="order-card-truck">from <span className="truck-name">{props.selectedTruck.name}</span></p>
<div className="order-items-cont">
{props.order.map(item => (
<div className="order-item-div">
<p className="order-item-count">{item.count}</p>
<p className="order-item-name">{item.item}</p>
<p className="order-item-total">{CurrencyFormatter.format(item.total, { currency: 'USD' })}</p>
<hr />
</div>
))}
</div>
<input className="order-note-input" type="text" placeholder="Note to truck..." />
<button className="pay-button">
<p className="total-items-count">{orderCount}</p>
<p>Next step: pay</p>
<p>{
CurrencyFormatter.format(props.order.reduce(function(prev, cur) {
return prev + cur.total;
}, 0), { currency: 'USD' })
}</p>
</button>
</Card>
)
}
const mapStateToProps = state => {
return {
selectedTruck: state.selectedTruck,
order: state.order
}
}
export default connect(mapStateToProps, { closeOrderCard })(OrderCard);
谷歌搜索真的很难找到这样的例子。如果您需要更多上下文/信息,请告诉我,并提前感谢您的帮助。
更新:
对于那些问为什么选择而不是常规输入的人,我只是从 Uber Eats 上复制这个设计。我可能会使用建议的想法,但我仍然想知道如何使用选择输入来做到这一点。这是来自 Uber Eats 的订单组件的屏幕截图:
解决方案
这是您使用选择修改的代码:
const OrderCard = (props) => {
const [state, setState] = useState(props.order);
const orderCount = props.order.reduce(function (prev, cur) {
return prev + cur.count;
}, 0);
const displayOptions = (count) => {
const options = [0, 1, 2, 3, 4, 5];
return options.map((option) => (
<option value={option} selected={option === count}>
{option}
</option>
));
};
const onSelectValueChange = (item) => {
const selectedValue = document.getElementById('mySelect').value;
// Do whatever you need with the value
if(selectedValue === 0) {
const newOrder = Object.assign({}, state); // better use deepclone() from lodash if you can
for(let i = 0; i < newOrder.length; i++){
const item = newOrder[i];
if(item.id === item.id){
newOrder.splice(i, 1);
setState({...state, order: newOrder});
}
}
}
}
return (
<Card className='order-card-main'>
<i
class='far fa-times-circle'
style={{
position: 'relative',
left: '0px',
textAlign: 'left',
width: '100%',
marginTop: '3%',
fontSize: '1.5rem',
}}
onClick={() => props.closeOrderCard()}
></i>
<h1 className='order-card-title'>Your Order</h1>
<p className='order-card-truck'>
from <span className='truck-name'>{props.selectedTruck.name}</span>
</p>
<div className='order-items-cont'>
{props.order.map((item) => (
<div className='order-item-div'>
<p className='order-item-count'>
<select id='mySelect' onChange={() => onSelectValueChange(item)}>
{displayOptions(item.count)}
</select>
</p>
<p className='order-item-name'>{item.item}</p>
<p className='order-item-total'>
{CurrencyFormatter.format(item.total, { currency: 'USD' })}
</p>
<hr />
</div>
))}
</div>
<input
className='order-note-input'
type='text'
placeholder='Note to truck...'
/>
<button className='pay-button'>
<p className='total-items-count'>{orderCount}</p>
<p>Next step: pay</p>
<p>
{CurrencyFormatter.format(
props.order.reduce(function (prev, cur) {
return prev + cur.total;
}, 0),
{ currency: 'USD' }
)}
</p>
</button>
</Card>
);
};
const mapStateToProps = (state) => {
return {
selectedTruck: state.selectedTruck,
order: state.order,
};
};
export default connect(mapStateToProps, { closeOrderCard })(OrderCard);
我假设您知道可以选择的选项,否则如果需要,您真的应该使用带有最小值/最大值的输入 type='number'。
[编辑]:我通过选择的 selectedValue 添加了您想要的删除选项。原理与按钮相同。我还假设你有一个状态,里面有你的订单。
推荐阅读
- node.js - 在 Visual Studio Code 上重新启动 npm 脚本
- spring - Spring boot - 带有未传递参数的 @getMapping 方法
- spring-boot - Spring AOP 与 Spring Kafka 没有按预期工作
- count - Power BI - 我如何计算列中值的出现次数?
- sql - 将多个表连接或连接到 CodeIgniter 3 中的单个表,如果有一个空单元格,则不会省略行
- spring - Spring Boot Rest Controller 过时参数
- apache-kafka - 关键主题中的奇怪字符键
- javascript - 使用 tensorflow.js 进行对象检测
- awk - awk 插入值和删除字段
- html - 无法使用百分比调整 HTML 输入的大小