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

Question

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

Answer 1

您应该首先将值属性赋给 options.You 不需要有纬度和经度的状态变量，因为它们与座位号有关。或者，您可以为每个座位值及其各自的纬度和经度值制作一张地图。

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

Answer 2

您需要获得 selected 的选项。先获取select元素，然后使用options集合中的selectedIndex获取selected选项

因为您使用数据属性，所以您可以访问 dataset 属性，可以在其中读取这些属性的值。破折号 user-seat-lat 在数据集中被转换为驼峰命名法： userSeatLat.

通过解构赋值，您可以从 dataset 访问所需的属性并将它们存储在变量中。

编辑：因为表单中的所有输入元素都调用了 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,
        })
    }
}

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

How can I pass dataset attribute to backend

javascript

attributes

reactjs