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

Question

我的输入元素不允许我输入内容，它会显示我想要的值，但我无法删除或编辑输入中的任何内容。据我所见，所有内容都拼写正确。

我一直在谷歌上搜索并搜索了多种SO表格，但没有一个能够帮助我。这就是我现在问的原因

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

上面的输入是不行的

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

这是 onChange 事件的代码。

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>

第一个参数在这里传入

可能是一个小问题，我太累了，没有注意到哈哈。感谢您的帮助，感谢您的宝贵时间!

Answer 1

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