设置增量数字输入的状态

Question

几个月没有reactjs后，我忘记了如何解决这种情况。我有一个数字的增量输入：

HTML:

<input
type="number"
value={stockQuantity}
defaultValue="1"
onChange={() => bookQuantity(stockQuantity)}
/>

React

const [stockQuantity, setStockQuantity] = useState(1);
const bookQuantity = (e) => {
setStockQuantity({ ...stockQuantity, [e.target.name]: e.target.value });
};

我只是得到错误，我没有找到解决方案，我没有发现任何以前的工作，我处理它。

知道吗？

Answer 1

您最初应该将stockQuantity定义为一个对象：

const [stockQuantity, setStockQuantity] = useState({books: 1});

然后您可以在onChange事件中设置State，或者创建一个单独的函数。你不必设置价值道具

<input
type="number"
name="books"
defaultValue="1"
onChange={(e) => setStockQuantity({...stockQuantity, [e.target.name]: e.target.value})}
/>

Answer 2

您需要将事件传递给onChange处理程序，并在输入中添加名称：

<input
type="number"
name="stockQuantity" // will be passed in e.target.name
value={stockQuantity}
defaultValue="1"
onChange={bookQuantity} // the same as onChange={(e) => bookQuantity(e)}
/>

Answer 3

我发现了一个小的线性解决方案：

const [stockQuantity, setStockQuantity] = useState(1); // just numbers
const bookQuantity = (e) => {
setStockQuantity({ ...stockQuantity, [e.target.name]: 
e.target.value });
};

HTML:

<input
type="number"
name="stock"
value={stockQuantity.books}
defaultValue="1"
onChange={bookQuantity}
// if you want you can use a placeholder
/>