我无法编辑react中的输入字段

Question

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;

我无法编辑输入字段，即使我添加了onChange句柄，它仍然不起作用，也不知道到底是什么问题。我认为它一定能正常工作，但不知道到底什么问题是休息，一切都很好。任何帮助都将通知

Answer 1

为什么在这里使用逻辑OR。可以使用defaultValue属性在输入字段中显示空值像

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

Answer 2

在您的输入中，用defaultValue替换value。

Answer 3

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

解决方案

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

<输入类型＝"；文本"；className＝"；形式控制"；id＝"；name"；name＝"；name"；value={event.name||updateEvent.name||"}onChange={e=>handleChange(e(}/>

2. 添加；name"；使用状态const[updateEvent，setEvent]=useState(｛name:"｝(