Javascript 如何将数据集属性传递到后端

我试图在userDetails内部更新座椅选择选项中的数据集属性（数据用户座椅高度和数据用户座椅长度）。 基本上，当用户从下拉列表中选择座位时，我希望userSeatLat和userSeatLong在datauserseatlat和datauserseatlong的userDetails中更新。现在函数formValues正在更新Name、Airline和Flight的值，所以我尝试添加一个函数，当用户选择座位时，但没有成功。 非常感谢您的帮助，谢谢

const Home = () => {
    const [userDetails, setUserDetails] = useState({
        userName: '',
        userAirline: '',
        userFlight: '',
        userSeat:'',
        userSeatLat: '',
        userSeatLong: '',
    });

    
    const formValues = (event) => {
        setUserDetails({
            ...userDetails,
            [event.target.name]: event.target.value
        })
    }
    
    const register = async (event) => {

        const body = JSON.stringify({
            userName: userDetails.userName,
            userAirline: userDetails.userAirline,
            userFlight : userDetails.userFlight,
            userSeat : userDetails.userSeat,
            userSeatLat : userDetails.userSeatLat,
            userSeatLong : userDetails.userSeatLong,
        });

        const response = await axios.post("/api/register", body, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        

    return (
        <div className="container">
            <h1 className="title">Register User</h1>
            <form onSubmit={register}>
                <label>Name: </label>
                <input required type="text" id="userName" name="userName" onChange={formValues}/>
                <br />
                <label>Airline: </label>
                <input required type="text" id="userAirline" name="userAirline" onChange={formValues}/>
                <br />
                    <label>Flight: </label>
                <input required type="text" id="userFlight" name="userFlight" onChange={formValues}/>
                <br />
                <label>Seat: </label>
                <select required type="text" id="userSeat" name = "userSeat" onChange={formValues}>
                    <option id="option1" data-user-seat-lat = "15" data-user-seat-long = "15" >Seat1</option>
                    <option id="option2" data-user-seat-lat = "10" data-user-seat-long = "0" >Seat2</option>
                    <option id="option3" data-user-seat-lat = "-10" data-user-seat-long = "-15" >Seat3</option>
                </select>
                <br />
                <button type="submit">Register</button>
                }
            </form>
        </div>
    )
}

export default Home;

常量Home=（）=>{
const[userDetails，setUserDetails]=useState({
用户名：“”，
用户航空公司：“”，
userFlight:“”，
用户席位：“”，
userSeatLat:“”，
userSeatLong:“”，
});
const formValues=（事件）=>{
setUserDetails({
…用户详细信息，
[event.target.name]：event.target.value
})
}
常量寄存器=异步（事件）=>{
const body=JSON.stringify({
用户名：userDetails.userName，
userAirline:userDetails.userAirline，
userFlight:userDetails.userFlight，
userSeat:userDetails.userSeat，
userSeatLat:userDetails.userSeatLat，
userSeatLong:userDetails.userSeatLong，
});
const response=wait axios.post（“/api/register”，主体{
标题：{
“内容类型”：“应用程序/json”
}
})
返回(
注册用户
姓名：


航空公司：


航班：


座位：
Seat1
座位2
Seat3


登记
}
)
}
导出默认主页；

您应该首先为选项提供value属性。您不需要为lat和long设置状态变量，因为它们与座位号相关。或者，您可以为每个座椅值绘制一张地图，其中包含其各自的lat和long值

<select required type="text" id="userSeat" name = "userSeat" onChange={formValues}>
                    <option id="option1" value="1" data-user-seat-lat = "15" data-user-seat-long = "15" >Seat1</option>
                    <option id="option2" value="2" data-user-seat-lat = "10" data-user-seat-long = "0" >Seat2</option>
                    <option id="option3" value="3" data-user-seat-lat = "-10" data-user-seat-long = "-15" >Seat3</option>
</select>

在发布这些值之前，根据下面的地图设置lat和long

const body = JSON.stringify({
            userName: userDetails.userName,
            userAirline: userDetails.userAirline,
            userFlight : userDetails.userFlight,
            userSeat : userDetails.userSeat,
            userSeatLat : seatMap[userDetails.userSeat].data-user-seat-lat,
            userSeatLong : seatMap[userDetails.userSeat].data-user-seat-long,
        });

---

您需要获取所选的选项。首先获取select元素，然后使用

options

集合中的

selectedIndex

获取所选选项

因为您使用数据属性，所以可以访问

数据集

属性，从中可以读取这些属性的值。破折号符号

user seat lat

在数据集中转换为camelCase符号：

userSeatLat

通过分解分配，您可以从

数据集

访问所需的属性，并将它们存储在变量中

编辑：因为表单中的所有输入元素都调用

formValues

函数，所以您的逻辑不适用于

input

元素。您必须进行一些类型检查以说明

select

元素

const formValues = (event) => {
    const { target } = event;

    if (target.tagName === 'SELECT') {
        const selectedOption = target.options[target.selectedIndex]
        const { userSeatLat, userSeatLong } = selectedOption.dataset

        setUserDetails({
          ...userDetails,
          userSeatLat,
          userSeatLong,
        })
    } else {
        setUserDetails({
          ...userDetails,
          [target.name]: target.value,
        })
    }
}

---

谢谢你的帮助！然而，我得到了一个错误：“TypeError:无法读取未定义的属性'undefined'”在这一行：const selectedOption=select.options[select.selectedIndex]。@martinsenlis。这是因为这是一个通用函数（formValues），他试图实现一个特定的功能。并非所有事件都有选项属性或selectedIndex属性（下拉列表有这些属性，输入元素没有。您正在从所有onChange处理程序调用formValues方法）。要做到这一点，你必须有一个单独的方法，仅用于下拉列表。（或者有一个if-else条件。或者你可以查找可选链接）@Vikrant是正确的。该函数过于通用，没有考虑

输入

元素。我已经包括了一些类型检查，以查看触发函数的元素是否是

select

元素。

const formValues = (event) => {
    const { target } = event;

    if (target.tagName === 'SELECT') {
        const selectedOption = target.options[target.selectedIndex]
        const { userSeatLat, userSeatLong } = selectedOption.dataset

        setUserDetails({
          ...userDetails,
          userSeatLat,
          userSeatLong,
        })
    } else {
        setUserDetails({
          ...userDetails,
          [target.name]: target.value,
        })
    }
}