将多个输入设置为状态

Question

我有一个日历应用程序，它以以下格式读取事件

{
  title: "Werk",
  start: moment().toDate(),
  end: moment(),

  allDay: false,
}, 

我有输入，以便用户可以制作自己的事件。

<form>
  <div className="text-center col-sm-12">
    <input placeholder="start date" required></input>
    <input placeholder="end date" required></input>
    <input placeholder="Title" onChange={this.myChangeHandler} required></input>{" "}
    <br /> <button className="text-center">Add event</button>
  </div>
</form>

我的问题是，我之前已经将状态设置为用户输入，但不是这种格式。状态需要是一个具有 4 个属性的对象。 title, Start, End, and allday 这些中的每一个都需要来自输入
总的来说，我对如何做到这一点感到有些困惑。任何帮助，将不胜感激。
我的完整代码是here 我希望我足够清楚，请问我是否没有。

Answer 1

首先，你需要使用 React 的useState。

const [state, setState] = React.useState({
  title: "Werk",
  start: moment().toDate(),
  end: moment(),
  allDay: false,
});

然后为每个input 设置值和处理程序，如下所示：

<input placeholder="start date"
  value={state.start}
  onChange={e => setState({...state, start: e.target.value})}
  required></input>

Answer 2

您可以为每个输入值使用状态值。

希望这会有所帮助。

import React, { Component } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

import './App.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

class App extends Component {
  state = {
    events: [
      {
        title: 'Werk',
        start: moment().toDate(),
        end: moment(),
        allDay: false
      }
    ],
    title: '',
    start: '',
    end: ''
  };

  myChangeHandler = (key) => (event) => {
    this.setState({ [key]: event.target.value });
  };

  onAddEvent = (event) => {
    event.preventDefault();
    const { title, start, end, events } = this.state;
    this.setState({
      events: [
        ...events,
        {
          title,
          start: moment(new Date(start)),
          end: moment(new Date(end)),
          allDay: false
        }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onAddEvent}>
          <div className="text-center col-sm-12">
            <input
              placeholder="start date"
              required
              onChange={this.myChangeHandler('start')}
            ></input>
            <input
              placeholder="end date"
              required
              onChange={this.myChangeHandler('end')}
            ></input>
            <input
              placeholder="Title"
              onChange={this.myChangeHandler('title')}
              required
            ></input>{' '}
            <br />{' '}
            <button type="submit" className="text-center">
              Add event
            </button>
          </div>
        </form>
        <Calendar
          localizer={localizer}
          defaultDate={new Date()}
          defaultView="month"
          events={this.state.events}
          style={{ height: '100vh' }}
        />
        <div className="list">
          <ul>
            <li>Display Weekly view X</li>
            <li>Highlight today X</li>
            <li>Allow navigation to different weeks X</li>
            <li>allow adding new events</li>
            <li>allow editing existing events</li>
            <li>allow deleting events</li>
            <li>Persisting data </li>
            <li>Use apis to load and save data </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default App;