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

debugcn 发表于 Dev

马丁·塞利斯

我正在尝试在userDetails内部更新的Seat选择的选项中获取数据集属性（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;

k客

您应该从为选项赋予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,
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。