gpt4 book ai didi

javascript - 向 html 输入元素添加默认值会卡住递增/递减功能

转载 作者:行者123 更新时间:2023-11-28 03:08:21 25 4
gpt4 key购买 nike

这是我表格中的一行:
enter image description here

在最后一列Quantité中,用户应该增加/减少该字段,并且值将相应地增加或减少。

我通过在最后一列添加一个 input 元素并使其类型:数字实现了这一点。增量/减量功能会自动添加。
这比使用两个按钮以及随之而来的所有额外痛苦要简单得多。

  <input
type="number"
className="form-control"
id="qte"
min="0"
max="200"
/>

无论如何,由于将从数据库中检索初始值,因此我必须为最后一列设置默认值:

 value="5"

但是,当我这样做时,当我单击输入字段中的增量/减量时,没有任何反应。
知道为什么会发生这种情况以及如何解决这个问题吗?

最佳答案

如果您尝试实现这是 React 应用程序,请将 value 替换为 defaultValue。检查 React 文档以获取有关不受控制组件的更多信息 Here 。检查片段

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" />

关于javascript - 向 html 输入元素添加默认值会卡住递增/递减功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60398292/

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