我的输入在React中不起作用，onChange看起来也不错

Question

My input element doesn't let me type into it, it will show up, with the value i want, but I cannot delete or edit anything in the input. Everything is spelled correctly from what I have seen.

I've been googling and have searched multiple SO forms, none have been able to help me. Which is why I am asking now

const GuestName =(props)=>{
    if(props.isEditing){
        return(
        <form>
        <input type='text' className='edit-guest-input'
         value={props.guestName} onChange={e => props.editGuest(e.target.value)}/>
         </form>
        )
    }

    return (
    <span>{props.guestName}</span>
    )
}

the above is the input that will not work

  editGuest=(id, name)=>{
    this.setState({
      guest: this.state.guest.map((guest) =>{
        if(id===guest.id){
          return{
            ...guest,
            name
          }}
          return guest
      })
    })
  }

this is the code for the onChange event.

const GuestList =(props)=>

    <div>

        <ul>
            {props.guest.filter( guest => !props.filterUnconfirmedGuest || guest.isConfirmed)
            .map((guest, index) =>   <Guest 
                            key={index}
                            guestName={guest.guestName}
                            toggleGuestConfirmed={props.toggleGuestConfirmed}
                            isConfirmed={guest.isConfirmed}
                            toggleEditGuest={()=> props.toggleEditGuest(guest.id)}
                            isEditing={guest.isEditing}
                            editGuest={editedName=> props.editGuest(editedName, guest.id)}
                            removeGuest={()=> props.removeGuest(guest.id)}
                                />)}
       </ul>
    </div>

The first argument is passed in here

Probably a minor issue that I am too tired to notice lol. Any help is appreciated, thank you for your time!

Answer 1

You are calling the editGuests function with one argument

onChange={e => props.editGuest(e.target.value)}

But it has two arguments in the definition

editGuest=(id, name)=>{

}

Answer 2

我认为在editGuest它应该是guestName: name :)