当用户完成输入时如何添加到数组？

Question

我有以下数组：

const [stock, setStock] = useState([])

我还有两个输入字段要输入股本(这是针对不同的产品，但所有股票必须添加到股票数组状态)。

如何将股票输入值添加到股票数组中？我只想在用户完成输入时添加股票。只有一个提交按钮和两个股票输入。

如果我只有一个股票字段，我就会用onChange事件将它保存在股票状态，但是在那里我有两个股票字段，所以我想使用一个数组。

编辑：使用基于颜色和大小值的映射来呈现产品的每个变体的库存输入。

Answer 1

我会使用一个对象，您可以在这个对象上使用类似于输入的名称之类的东西作为键，然后将状态设置为输入字段的值。

这样，您就可以动态地为每个产品添加值。

​

const { useState } = React;

const Example = () => {

    const [stock, setStock] = useState({ })

    function addStock(){
        setStock({
            ...stock,
            [event.target.name]: event.target.value
        });
    }
    
    console.log(stock);
    
    return (  
        <div>
            <label for={'product_1'}>{'Product 1'}</label>
            <input onChange={addStock} name={'product_1'} />
            <br />
            <label for={'product_2'}>{'Product 2'}</label>
            <input onChange={addStock} name={'product_2'} />
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

​

基于OP的comment编辑；

如果输入是由map()生成的，您只需要找到一个唯一的键作为name，因此也就是对象键。

考虑下面的代码片段，与上面的想法相同，但是使用map()，它为data数组中的每个对象提供了reders <input>和<label>

​

const { useState } = React;

const data = [
    { color: 'red', size: 15 },
    { color: 'blue', size: 30 }
];

const Example = () => {

    const [stock, setStock] = useState({ })

    function addStock(){
        setStock({
            ...stock,
            [event.target.name]: event.target.value
        });
    }
    
    console.log(stock);
    
    return (  
        <div id='demo'>
            {
                data.map(d => {
                    const customKey = Object.values(d).join('_');
                    
                    return (
                        <React.Fragment>
                            <label for={customKey}>{customKey}</label>
                            <input onChange={addStock} name={customKey} />
                        </React.Fragment>
                    );
                })
            }
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

#demo { width: 150px; display: flex; flex-direction: column; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

​

Answer 2

您将以以下方式使用带有两个键(每个输入一个)的object

const [stock, setStock] = useState({})


function handleChange(event) {
   setStock({..stock, [event.target.name]: event.target.value});
}

return (
   <input name="item1" onChange={handleChange} />
   <input name="item2" onChange={handleChange} />
)

Answer 3

您可以创建一个临时的第二状态来存储股票。

// temporary stock state
const [tmpStock1, setTmpStock1] = useState(0);
const [tmpStock2, setTmpStock2] = useState(0);

const [stock, setStock] = useState([])

然后更新每个输入的onChange事件的状态。单击按钮时，可以将这两种状态保存到数组中，并可能重置。