时间戳

首页 > 解决方案 > 我怎样才能让这个函数接受一个数组元素的 id，然后调度一个动作？MERN 堆栈

reactjs - 我怎样才能让这个函数接受一个数组元素的 id，然后调度一个动作？MERN 堆栈

问题描述

该组件的目的是呈现一个 div，其中包含在今天之后发生的每个约会的详细信息。然后，用户应该能够在输入字段中填写详细信息，然后按提交。提交后，我正在尝试发送一个 redux 操作，我需要它获取单击提交按钮的特定约会 div 的 id。

我似乎无法让 handleSubmit 函数正常工作。我不知道我是否将约会._id 错误地传递到按钮的 onClick 处理程序中，或者我是否将它错误地带入了 handleSubmit 函数，或者完全是其他的东西。请注意，有两个 _id，一个用于约会数组中的特定约会，一个来自用户的 _id，从其父组件传递到组件。

有谁知道如何让它正常工作？

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { confirmAppointment } from '../../../actions/appointment'

const ConfirmAppointment = ({user}) => {

    const dispatch = useDispatch()

    const { appointments, _id } = user?.result

    const today = new Date()
    
    const [reasonForMassage, setReasonForMassage] = useState('')

    const formData = {
        reasonForMassage
    }

    // SET UP AN ONCLICK FOR EACH BUTTON TO SUBMIT IT'S OWN DISPATCH TO UPDATE APPOINTMENT 

    const handleSubmit = (e, appointmentId) => {
        e.preventDefault()
        console.log(appointmentId, reasonForMassage)
        //update appointment with the appointment id
        dispatch(confirmAppointment(_id, appointmentId, formData))
    }

    return (
        appointments?.length !== 0 ? (
            <div style={{marginTop: '3em'}}>
                <h4>Upcoming Appointments</h4>
                    {appointments && appointments?.map((appointment) => (
                        new Date(appointment?.date) >= today ? (                  
                            <div style={{marginBottom: '3em'}} key={appointment._id} >
                                <table className="ui table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Duration</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{appointment?.date}</td>
                                            <td>{appointment?.time}</td>
                                            <td>{appointment?.duration}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <form className="ui form" >
                                    <div className="ui fields">
                                        <div className="ui field">
                                            <label>Reason for booking massage:</label>
                                            <input type="text" value={reasonForMassage} onChange={(e)=>setReasonForMassage(e.target.value)}/>
                                        </div>
                                        <div className="ui field">
                                            <h5>I give consent to massage the following areas:</h5>
                                            <div>
                                                <input type="checkbox" />
                                                <label>Glutes</label>
                                                <input type="checkbox" />
                                                <label>Abdomen</label>
                                                <input type="checkbox" />
                                                <label>Chest</label>
                                                <input type="checkbox" />
                                                <label>Inner thighs</label>
                                            </div>
                                        </div>
                                        <div className="ui field">
                                            <label>Are there any other areas you would not like to be massaged?</label>
                                            <input type="text" />
                                        </div>
                                    </div>
                                    <button onClick={()=>handleSubmit(appointment?._id)} className="ui button">Confirm Appointment</button>
                                </form>                                
                            </div>
                            ) : (                              
                                <div></div>
                            )
                        ))}                 
            </div>
        ) : (
            <div>
                No upcoming appointments
            </div>
        )
        
    )
}


export default ConfirmAppointment

标签： reactjsreact-reduxmern

解决方案

您需要更改按钮的 onClick 功能

 <button
                onClick={() => handleSubmit(appointment?._id)}
                className='ui button'
            >
                Confirm Appointment
            </button>

至

  <button
                onClick={e => handleSubmit(e, appointment?._id)}
                className='ui button'
            >
                Confirm Appointment
            </button>

推荐阅读