我如何获得选定的div元素颜色更改并在ReactJS中将每个选定的Div元素存储在状态中？

Question

我正在尝试创建一个预订时段。我已经将所有可用的时段存储在状态中，我正在从API和max_slots获取max_slots =数字，我在每个给定时间创建时段。现在我需要存储选择的时段插槽处于状态并更改所选插槽的颜色。双击时取消选中插槽。

我试图在这里做我的代码，这是您最欢迎的Edit。

https://codesandbox.io/s/2v15vl8rk0

class SlotBookingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bookingDate: "",
      buttonColor: "red",
      startTime: "",
      endTime: "",
      AvailableSlots: [],
      slots: null
    };
    this.updateState = this.updateState.bind(this);
    //this.handleSlots = this.handleSlots.bind(this);
  }

  onButtonPress() {
    this.setState({
      buttonColor: "#123eee"
    });
  }

  parseIn(date_time) {
    var d = new Date();
    d.setHours(date_time.substring(11, 13));
    d.setMinutes(date_time.substring(14, 16));

    return d;
  }

  getTimeSlots(time1, time2) {
    var arr = [];
    while (time1 < time2) {
      arr.push(time1.toTimeString().substring(0, 5));
      time1.setMinutes(time1.getMinutes() + 30);
    }
    return arr;
  }

  updateState() {
    var startTime = "2019-05-06T10:30:00+05:30";
    var endTime = "2019-05-06T22:00:00+05:30";

    startTime = this.parseIn(startTime);
    endTime = this.parseIn(endTime);
    var intervals = this.getTimeSlots(startTime, endTime);
    this.setState({
      AvailableSlots: intervals
    });
  }

  componentDidMount() {
    this.updateState();
  }

  componentWillReceiveProps(props) {
    this.setState({ slots: props.SlotsData });
    console.log(this.state.slots);
  }
  handleClick(i, item) {
    this.setState({
      slotsbooked: i,
      time: item
    });
    console.log(i, item);
  }

  render() {
    const AvailableSlots = this.state.AvailableSlots;

    const handleSlots = (max_slot, item) => {
      let slots = [];
      for (let counter = 1; counter <= max_slot; counter++) {
        slots.push(
          <div
            className="col"
            onClick={() => this.handleClick(counter, item)}
            style={{
              margin: 5,
              backgroundColor: "#575756",
              height: "28px"
            }}
          />
        );
      }
      // console.log(slots);
      return slots;
    };

    const RowData = AvailableSlots.map(function(item, index) {
      //max_slot wold come from API
      var max_slot = 4;
      if (max_slot == 1) {
        return (
          <div className="row">
            <p>{item}</p>
            <div
              className="col"
              key={item}
              style={{ backgroundColor: "#123eee", height: "28px" }}
            >
              col
            </div>
          </div>
        );
      } else {
        return (
          <div className="data">
            <div className="row test">
              <div className="slot">{item}- </div>
              {handleSlots(max_slot, item)}
            </div>
          </div>
        );
      }
    });

    return (
      <div className="container">
        <div className="col-md-9 slot-window product-details">{RowData}</div>
      </div>
    );
  }
}

ReactDOM.render(<SlotBookingComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 1

使每次在├── static │ ├── index.html | |-- bundles │ │ ├── main.js │ │ ├── vendors.js │ │ ├── runtime.js 数组中都有自己的时隙。例如AvailableSlots。

[{time: '20:00', slots: {slot1: false, slot2: false, slot3: true}]

点击处理

getTimeSlots(time1, time2) {
  var arr = [];
  while (time1 < time2) {
    arr.push({
      time: time1.toTimeString().substring(0, 5),
      // create slots for each given time
      // change slots object properties to your liking
      slots: {
        '1': false,
        '2': false,
        '3': false,
        '4': false
      }
    });
    time1.setMinutes(time1.getMinutes() + 30);
  }

  return arr;
}

在handleSlots功能中检查是否已选择插槽。

handleClick(i, item, index) {

  const selected = this.state.AvailableSlots[index].slots[i.toString()];

  const slots = Object.assign({}, this.state.AvailableSlots[index].slots, {[i.toString()]: !selected });


  this.setState({
    AvailableSlots: [
      ...this.state.AvailableSlots.slice(0, index),
      Object.assign({}, this.state.AvailableSlots[index], { slots: slots, time: item.time }),
      ...this.state.AvailableSlots.slice(index + 1)
    ]
  });

}

const handleSlots = (max_slot, item, index) => {
  let slots = [];
  for (let counter = 1; counter <= max_slot; counter++) {
    slots.push(
      <div
        className="col"
        onClick={() => this.handleClick(counter, item, index)}
        style={{
          margin: 5,
          backgroundColor: item.slots[counter.toString()] ? 'green' : '#575756',
          height: '28px'
        }}
      />
    );
  }
  // console.log(slots);
  return slots;
};