如何在React中创建新帖子？

Question

我每个人都对React和编码感到陌生。我正在制作我的第一个React Web应用程序，并且正在尝试制作一个活动网站。创建新事件时，我的表单未将新事件提交到/ home。目前，此操作仅在本地使用fakeEvents文件夹完成。创建按钮始终处于禁用状态。

这是fakeEvents.jsx用于保存事件的功能。

List<Gid> list = new ArrayList<>(Arrays.asList(new Gid(), new Gid()));

这是eventForm页面

export function getEvents() {
  return events;
}
export function getEvent(id) {
  return events.find(e => e._id === id);
}

export function saveEvent(event) {
    let eventInDb = events.find(e => e._id === event._id) || {};
    eventInDb.title = event.title;
    eventInDb.category = categoryAPI.categories.find(c => c._id === event.categoryId);
    eventInDb.numberOfAtendies = event.numberOfAtendies;
    eventInDb.eventTime = event.eventTime;
    eventInDb.location = event.location;
    eventInDb.details = event.details;

    if (!eventInDb._id) {
      eventInDb._id = Date.now().toString();
      events.push(eventInDb);
    }

    return eventInDb;
  }

这是在event.jsx页面中

    class EventForm extends Form {
  state = {
    data: {
      title: "",
      eventPicture: "",
      categoryId: "",
      eventTime: "",
      numberOfAtendies: "",
      location: "",
      details: ""
    },
    categories: [],
    errors: {}
  };
  schema = {
    _id: Joi.string(),
    title: Joi.string()
      .required()
      .label("Event Title"),
    categoryId: Joi.string()
      .required()
      .label("Choose Category"),
    eventTime: Joi.number()
      .required()
      .label("Choose Event Time"),
    numberOfAtendies: Joi.number()
      .required()
      .min(1)
      .max(100000)
      .label("Numeber of Attendies"),
    location: Joi.string()
      .required()
      .label("Event Location"),
    details: Joi.string()
      .required()
      .label("Event Details")
      .min(250)
      .max(300)
  };

  componentDidMount() {
    const categories = getCategories();
    this.setState({ categories });

    const eventId = this.props.match.params.id;
    if (eventId === undefined) return;

    const event = getEvent(eventId);
    if (!event) return this.props.history.replace("/not-found");

    this.setState({ data: this.mapToViewModel(event) });
  }

  mapToViewModel(event) {
    return {
      _id: event._id,
      title: event.title,
      categoryId: event.category._id,
      eventTime: event.eventTime,
      numberOfAtendies: event.numberOfAtendies,
      location: event.location,
      details: event.details
    };
  }
  doSubmit = () => {
    saveEvent(this.state.data);

    this.props.history.push("/home");
  };
  render() {
    return (
      <div>
        <h1>Create Event</h1>
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("title", "Title")}
          {this.renderSelect("categoryId", "Category", this.state.categories)}
          {this.renderInput("eventTime", "Event Time")}
          {this.renderInput("numberOfAtendies", "Number of Attendies")}
          {this.renderInput("location", "Location")}
          {this.renderInput("details", "Details")}
          {this.renderButton("Create")}
        </form>
      </div>
    );
  }
}

export default EventForm;