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

您正在通过一个参数调用editGuests函数

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

但是它在定义中有两个参数

editGuest=(id, name)=>{

}

Answer 2

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

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

2 个答案: