在 React 中使用选择表单将数据保存在 useState 变量中答案

【问题标题】：Saving data in useState variable with select form in React在 React 中使用选择表单将数据保存在 useState 变量中
【发布时间】：2022-02-08 04:51:01
【问题描述】：

我有一个包含大小和数量属性的对象数组（FE：{size：“Large”，数量：10}）。我希望用户能够在表单中选择任何可用大小，然后将其存储在 useState 中。老实说，我第一次做这样的事情，遗憾的是我的代码不起作用。我收到以“事件未定义”开头的 basillion 错误。我在下面粘贴我的代码：

    const handleChange = (event) => {
        setChosenSize(event.target.value)
    }

    const choseSize = (array) => {
        return (<>
             <form>
                <label>Choos your size:</label>
                <select onChange={() => handleChange()}>
                    {array.map((object) => {
                    return (
                        <option value={object.size}>{object.size}: {object.quantity}</option>
                    )
                    })}
                </select>
            </form>
        </>)
    }
    console.log(chosenSize)

【问题讨论】：

如果您需要访问处理程序中的事件，那么您应该通过onChange={(e)=>handleChange(e)} 对其进行修补，或者直接提供您的处理程序onChange={handleChange}
数组在哪里？
您能否显示更多代码以查看您如何使用使用状态。未定义事件错误即将到来，因为您没有在 onChange 中传递事件。

标签： javascript html reactjs forms use-state

【解决方案1】：

您正在运行该函数而没有在其中传递任何内容，因此event 将是未定义的或为空的。以下应该可以解决您的问题：

const handleChange = (event) => {
        setChosenSize(event.target.value)
    }

    const choseSize = (array) => {
        return (<>
             <form>
                <label>Choos your size:</label>
                <select onChange={(event) => handleChange(event)}>
                    {array.map((object) => {
                    return (
                        <option value={object.size}>{object.size}: {object.quantity}</option>
                    )
                    })}
                </select>
            </form>
        </>)
    }
    console.log(chosenSize)

或者您可以执行以下操作（我更喜欢）

const handleChange = (event) => {
        setChosenSize(event.target.value)
    }

    const choseSize = (array) => {
        return (<>
             <form>
                <label>Choos your size:</label>
                <select onChange={handleChange}>
                    {array.map((object) => {
                    return (
                        <option value={object.size}>{object.size}: {object.quantity}</option>
                    )
                    })}
                </select>
            </form>
        </>)
    }
    console.log(chosenSize)

【讨论】：

有效！谢谢！