Javascript 我无法在react中编辑输入字段

event.js

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import { editEvent, eventDetail } from '../actions/event';

const EventDetail = () => {
 const { id } = useParams();
 const [updateEvent, setEvent] = useState();
 const EventRecord = useSelector((state) => state.eventDetail);
 const { loading, event, error } = EventRecord;
 const userRecords = useSelector((state) => state.userList);
 const { users } = userRecords;
 const dispatch = useDispatch();
 useEffect(() => {
    dispatch(eventDetail(id));
    setEvent(event);
 }, [id, dispatch]);
const handleChange = e => {
    console.log({ ...updateEvent, [e.target.name]: e.target.value });
    // setEvent({ ...updateEvent, [e.target.name]: e.target.value });
};
const handleSubmit = async e => {
    e.preventDefault();
    dispatch(editEvent(updateEvent, id))
};

return (
    <div>
        {
            loading ? (
                <div> Loading... </div>
            ) : error ? (
                <div> {error} </div>
            ) : (
                        <form onSubmit={e => handleSubmit(e)} >
                            <div className="form-group">
                                <label htmlFor="name" className='mt-2'>Name</label>
                                <input type="text" className="form-control" id="name" name="name" value={event.name || ''} onChange={e => handleChange(e)} />
                            </div>
                            <div className="form-group">
                                <label htmlFor="description">Description</label>
                                <input type="text" className="form-control" id="description" name="description" value={event.description || ''} onChange={e => handleChange(e)} />
                            </div>
                            <div className="form-group">
                            <label htmlFor='userId'>Assosicated User:</label>
                            <select value={event.userId || ''} onChange={e => handleChange(e)} className="form-control" name='userId' >
                                
                            <option> Please Select </option>
                                {
                                    users.map((item) => {
                                        return (
                                            <option key={item.id} value={item.id} > {item.name} </option>
                                        )
                                    })
                                }
                            </select>
                        </div>
                            <Link to='/'> <button type="submit" className="btn btn-primary">Back</button> </Link>
                            <button type="submit" className="btn btn-primary float-right">Update Event</button>
                        </form>
                    )
        }
    </div>
 )
};

export default EventDetail;

import React，{useffect，useState}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从“react router dom”导入{Link，useParams}；
从“../actions/event”导入{editEvent，eventDetail}；
const EventDetail=（）=>{
const{id}=useParams（）；
const[updateEvent，setEvent]=useState（）；
const EventRecord=useSelector（（state）=>state.eventDetail）；
const{loading，event，error}=EventRecord；
constUserRecords=useSelector（（state）=>state.userList）；
const{users}=userRecords；
const dispatch=usedpatch（）；
useffect（（）=>{
调度（事件详细信息（id））；
setEvent（事件）；
}，[id，调度]；
常量handleChange=e=>{
log（{…updateEvent[e.target.name]：e.target.value}）；
//setEvent（{…updateEvent[e.target.name]：e.target.value}）；
};
const handleSubmit=async e=>{
e、 预防默认值（）；
分派（editEvent（updateEvent，id））
};
返回(
{
装货(
加载。。。
)：错误(
{错误}
) : (
handleSubmit（e）}>
名称
handleChange（e）}/>
描述
handleChange（e）}/>
联合用户：
handleChange（e）}className=“表单控制”name='userId'>
请选择
{
users.map（（项目）=>{
返回(
{item.name}
)
})
}
返回
更新事件
)
}
)
};
导出默认事件详细信息；

---

我无法编辑输入字段，即使我添加了onChange句柄，但它仍然不起作用，不知道到底是什么问题。我认为它必须工作良好，但不是不知道到底是什么问题，其余一切都工作良好。任何帮助都将在您的输入中显示，用默认值替换值。

为什么在此处使用逻辑或。您可以使用

defaultValue

属性在输入字段中显示空值 像

handleChange（e）}/>

@Shubham，您提供了value=event.name或value=event.description。事件是来自useSelector的状态

解决方案

您还必须提供您正在handleChange函数中更新的本地状态，即updateEvent作为输入字段的值

handleChange（e）}/>

在useState中添加“名称” const[updateEvent，setEvent]=useState（{name:'}）

---

我认为您需要将onChange值分配给您正在跟踪的状态变量。它适用于每种情况，但不适用于select，就好像我在select中给它赋值一样，它不会更改，如果我给它defaultValue，它不会显示VALUEMADD selected=“selected”对于您希望使defaultIt适用于每种情况但不适用于select的特定选项，就好像我在select中给定值一样，它不会更改；如果我在select中给定defaultValue，它不会显示值它适用于每种情况，但不适用于select，就好像我在select中给定值一样，它不会更改；如果我在select中给定defaultValue，它不会更改显示该值

  <input type="text" className="form-control" id="description" defaultValue="" name="description" value={event.description} onChange={e => handleChange(e)} />