向 html 输入元素添加默认值会冻结递增/递减功能
Posted
技术标签:
【中文标题】向 html 输入元素添加默认值会冻结递增/递减功能【英文标题】：Adding a default value to html input element freezes the increment/decrement functionality 【发布时间】：2020-06-09 09:41:37 【问题描述】：这是我表格的一行：
在最后一列Quantité中，用户应该增加/减少该字段，并且值将相应地增加或减少。
我通过在最后一列中添加 input 元素并使其 type : number 来实现这一点。自动添加递增/递减功能。 这比做两个按钮以及随之而来的所有额外痛苦要简单得多。
<input
type="number"
className="form-control"
id="qte"
min="0"
max="200"
/>
无论如何，由于初始值将从数据库中检索，因此我必须为最后一列设置默认值：
value="5"
但是，当我点击输入字段中的递增/递减时，什么也没有发生。 知道为什么会发生这种情况以及如何解决这个问题吗？
【问题讨论】：
你是怎么做到的？显示您设置默认值的代码？你是在渲染时还是在使用 Jquery 之后呢？只需添加 value="5" 不会引起任何问题。其次，重要的是，ID 必须是唯一的。每个元素都应该有一个唯一的 ID。在我们的例子中，每一行的 qte 是 id="qte" @NawedKhan 是的，添加 value="5" 将默认值设置为 5，显示 5 并冻结递增/递减功能。换句话说，我点击并没有任何反应。 w3schools.com/tags/att_input_type_number.asp ===> value - 指定默认值 我不同意。增加价值与任何事情无关。它甚至不是 javascript 或 JQuery 问题。这是一个示例，它可以完美运行jsfiddle.net/avL06gy8 您没有共享 javascript 代码。它在何时何地冻结？您要分享的内容还有很多。 我在 React App 中尝试过，也遇到了你的问题，我不知道原因，但看起来你需要做两个按钮来更改值：/ @AhmedGhrib跨度> 【参考方案1】：如果您尝试实现这是 React 应用程序，请将 value 替换为 defaultValue。查看反应文档以了解更多关于不受控制的组件Here。检查sn-p
class Hello extends React.Component
render()
return (
<div> <p>Input React Sample</p>
<input type="number" min="0" max="100" defaultValue="5"/>
</div>
);
;
ReactDOM.render( < Hello / > , document.getElementById("app_root"));<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
</script>
</body>如果问题是在html中，则不需要默认值，只需添加value="your_initial_value"
<input type="number" min="0" max="100" value="5" />【讨论】：
以上是关于向 html 输入元素添加默认值会冻结递增/递减功能的主要内容，如果未能解决你的问题，请参考以下文章