Question

我正在尝试输入内容，但它也不允许我输入。我的状态改变了，但是没有显示。我正在使用道具显示事件OR，如果没有道具（未选择事件），则显示空事件。

对不起，但是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

每次运行输入值更改componentDidMount，然后在componentDidUpdate中将状态重置为初始状态值。

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

还可以在输入更改时更改状态。并且由于其pureComponent不会更新。

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

React-即使设置了状态，输入字段也无法编辑

1 个答案: