时间戳

首页 > 解决方案 > 如何将数据集属性传递给后端

javascript - 如何将数据集属性传递给后端

问题描述

我正在尝试在 userDetails 内部更新的座位选择选项中获取数据集属性（data-user-seat-lat 和 data-user-seat-long）。基本上，当用户从下拉列表中选择他的座位时，我希望从 data-user-seat-lat 和 data-user-seat-long 在 userDetails 中更新 userSeatLat 和 userSeatLong。现在函数 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;

标签： javascriptreactjsattributes

解决方案

您应该首先将 value 属性赋予选项。您不需要有 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>

和这样的地图。

const seatMap = {
   "1" : {data-user-seat-lat : "15", data-user-seat-long : "15" },
   "2" : {data-user-seat-lat : "10", data-user-seat-long : "0" },
   "3" : {data-user-seat-lat : "-10", data-user-seat-long : "-15" }
}

并且在发布值之前根据这样的地图设置纬度和经度

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,
        });

推荐阅读