React - 即使我设置了状态，输入字段也不可编辑

Question

我正在尝试输入输入，但它也不允许我。我的状态发生了变化，但没有显示。我正在使用道具来显示事件或，如果没有道具（没有选择事件），则使用空事件。

对不起，但 Stack 告诉我添加更多详细信息，但我不知道还要添加什么，我已经描述了我的问题

class EventForm extends PureComponent {
    state = {
    event: this.props.selectedEvt,
    query: ""
};
onFormSubmit = e => {
    e.preventDefault();
    this.props.addEvent(this.state.event);
};
onInputChange = evt => {
    console.log(evt);
    evt.persist();
    let newEvt = this.state.event;
    newEvt[evt.target.name] = evt.target.value;
    this.setState({
    event: newEvt
    });
};
componentDidUpdate(prevProps) {
    this.props.selectedEvt &&
    this.setState({
        event: this.props.selectedEvt
    });
}
render() {
    const { event } = this.state;
    return (
    <form className="card" onSubmit={this.onFormSubmit}>
        <div className="form-row card-body">
        <div className="form-group col-md-12">
            <label hmtlfor="inputName">Event Name</label>
            <input
            name="title"
            type="text"
            className="form-control"
            id="inputEventName"
            onChange={this.onInputChange}
            value={event.title}
            />
            <label hmtlfor="inputDate">Event Date</label>
            <input
            name="date"
            type="date"
            className="form-control"
            id="inputEventDate"
            onChange={this.onInputChange}
            value={event.date}
            />
            <label hmtlfor="inputDate">Event Time</label>
            <input
            name="time"
            type="time"
            className="form-control"
            id="inputEventTime"
            onChange={this.onInputChange}
            value={event.time}
            />
            <label hmtlfor="inputAddress">Address</label>
            <input
            name="address"
            type="text"
            className="form-control"
            id="autocomplete"
            onChange={this.onInputChange}
            value={event.address}
            autoComplete="new-password"
            />
            <label hmtlfor="inputHost">Hosted By</label>
            <input
            name="host"
            type="text"
            className="form-control"
            id="inputHost"
            onChange={this.onInputChange}
            value={event.host}
            />
            <label hmtlfor="inputDesc">Description</label>
            <textarea
            name="desc"
            className="form-control"
            rows="5"
            id="inputDesc"
            wrap="soft"
            onChange={this.onInputChange}
            value={event.description}
            />
            <button type="submit" className="btn btn-primary mt-2">
            Submit
            </button>
        </div>
        </div>
    </form>
    );
}
}
export default EventForm;

Answer 1

每次输入值更改组件 DidMount 运行时，您都会在 componentDidUpdate 中将状态重置为初始状态值。

componentDidUpdate(prevProps) {
    this.props.selectedEvt &&
    this.setState({
        event: this.props.selectedEvt // Here is the problem
    });
}

此外，当输入更改时，您也会改变状态。而且因为它的纯组件，它不会更新。

将onInputChange更改为

onInputChange = evt => {
    let name = evt.target.name;
    let value = evt.target.value;
    let newEvent = {...this.state.event};
    newEvent[name] = value
    this.setState({event: newEvent});
}