Javascript 如何使用React创建具有输入值的卡片列表？

我正在做一个项目，医生必须制定一个时间表。它由一周中天数的复选框组成。医生可以（在复选框中）勾选他住院的日子

（屏幕截图张贴在底部）

现在，如果用户在卡上设置时间并按下“+”按钮，则该时间应显示在该卡上“+”按钮的下方。 那么，怎样才能做到这一点呢

从“React”导入React，{Component}；
导出默认类应用程序扩展组件{
状态={
小时：[“H”、1、2、3、4、5、6、7、8、9、10、11、12]，
最小值：[“M”，“00”，30]，
期间：[''，“上午”，“下午”]，
天数：[
“星期日”，
“星期一”，
“星期二”，
“星期三”，
“星期四”，
“星期五”，
“星期六”
],
有效日期：[]，
所选数据：[]
};
daysChecked=（e，i）=>{
const{availableDays，selectedData}=this.state；
设arr=availableDays；
设selArr=selectedData；
如果（例如，选中目标）{
arr.push（即目标值）；
}否则{
设filterValue=arr.indexOf（e.target.value）；
阵列拼接（滤波器值，1）；
//当我们取消选择一天时，为了使数据消失，我们将其show属性设置为false
selArr[e.target.value].show=false；
}
这是我的国家({
有效日期：arr，
所选数据：selArr
});
};
存储时间=（e，id，type）=>{
const{availableDays，selectedData}=this.state；
var newArr=所选数据；
可用的&&
availableDays.map（（项目，索引）=>{
如果（索引===id）{
newArr[项目]={
…newArr[项目]，
秀:假,，
[类型]：e.target.value
};
}
});
this.setState（{selectedData:newArr}）；
};
showTime=（e，i）=>{
const{availableDays，selectedData}=this.state；
var newShowValue=selectedData；
newShowValue[availableDays[i]]。show=true；
this.setState（{selectedData:newShowValue}）；
};
render（）{
const{availableDays，selectedData}=this.state；
返回(
可用天数
{this.state.days.map（（day，i）=>(
this.daysChecked（e，i）}
值={day}
/>
{day}
))}
时隙
{availableDays&&
availableDays.map（（天，i）=>(
{day}
这个.saveTime（e，i，“fromHour”）}>
{this.state.hour.map（（e，i）=>(
{e}
))}
这个.saveTime（e，i，“fromMin”）}>
{this.state.min.map（（e，i）=>(
{e}
))}
this.saveTime（e，i，“fromPeriod”）}>
{this.state.period.map（（e，i）=>(
{e}
))}
到

这个.saveTime（e，i，“toHour”）}>
{this.state.hour.map（（e，i）=>(
{e}
))}
这个.saveTime（e，i，“toMin”）}>
{this.state.min.map（（e，i）=>(
{e}
))}
这个.saveTime（e，i，“toPeriod”）}>
{this.state.period.map（（e，i）=>(
{e}
))}
这个.showTime（e，i）}>+
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]]。是否显示===真(
从-
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]]。fromHour}
:
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]]。fromMin}
:
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]]。fromPeriod}


到-
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]].toHour}
:
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]].toMin}
:
{selectedData[availableDays[i]]&&
已选择数据[availableDays[i]]。TopPeriod}
) : (
)}
))}
);
}
}

我已经删除了css类，重新应用它们。

---

请尝试一下，如果您面临任何问题，请告诉我。

您能告诉我您的方法以及您在这方面面临的问题吗？此外，您正在通过覆盖数据的相同操作设置FROM&TO时间。正如您在屏幕截图中看到的，当您选中“周一”、“周二”、“周三”时，调用了一个“daysChecked（）”方法，该方法将这些选中的元素推送到状态对象名称“availableDays”的数组中因此，在map方法的帮助下，我从availableDays创建了这3张卡（您可以在另一个屏幕截图中看到）。现在我的问题是，如果我在一张卡上设置时间，例如：凌晨2:00-凌晨3:00，那么在按下“+”按钮后，时间应该显示在该卡上“+”按钮下方

this.props.updateFromHour（e，i），this.props.updateFromMin（e，i）&this.props.updateFromPeriod（e，i）

这些函数做什么？你能给我看看这个密码吗？如果您可以将代码添加到公共存储库并保存其链接，那就更好了

state= { 
      days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
      availableDays: []
}

daysChecked= (e,i) => {
  let checkbox= document.querySelectorAll('.checkbox')

  let arr= this.state.availableDays

  if(e.target.checked) {
    arr.push(e.target.value)

  }
  else{
    filterValue = arr.indexOf(e.target.value)
    arr.splice(filterValue, 1)
    filterIndex= index.indexOf(i)
    index.splice(filterIndex,1)
 }
 this.setState({
   availableDays: arr
 })
}
render() {
return(
  <div className='available'>
    <h3 className='availableDays'>Available Days</h3>
    <div className= 'available-days'>
      {this.state.days.map((day,i) => (
        <label key={i} className= 'days'>
          <input type='checkbox' className= 'checkbox' onClick={ (e) => this.props.daysChecked(e,i) } value= {day} />{day}</label>
        ))}
    </div>
  </div>
)
 }
}

  state= {
hour: ['H',1,2,3,4,5,6,7,8,9,10,11,12],
min: ['M','00',30],
period: ['','AM','PM']

}

render() {
    return(

  <div className='timeslots'>
    <h3>Time Slots</h3>
    {
      this.props.availableDays.map((day,i) => (
        <div key={day} className='timeslots-array'>
          <p className='timeSlots-day'>{day}</p>
          <div className= 'set-time from'>
            <select className= 'time from-hour'  >
              {this.state.hour.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
            <select className= 'time from-min' >
              {this.state.min.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
            <select className= 'from-period'  >
              {this.state.period.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
          </div>
          <p>TO</p>
          <div className= 'set-time to'>
            <select className= 'time to-hour'  >
              {this.state.hour.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
            <select className= 'time to-min' >
              {this.state.min.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
            <select className= 'to-period'  >
              {this.state.period.map((e,i) => (
                <option key={e}>{e}</option>
              ))}
            </select>
          </div>
          <a id={i} className='timeslots-button' ><i className="fas fa-plus-circle"></i></a>
          <div className= 'timslots-display'>

          </div>
        </div>
      ))
    }
  </div>
)
  }
}

import React, { Component } from "react";

export default class App extends Component {
  state = {
    hour: ["H", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    min: ["M", "00", 30],
    period: ["", "AM", "PM"],
    days: [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    availableDays: [],
    selectedData: []
  };
  daysChecked = (e, i) => {
    const { availableDays, selectedData } = this.state;
    let arr = availableDays;
    let selArr = selectedData;
    if (e.target.checked) {
      arr.push(e.target.value);
    } else {
      let filterValue = arr.indexOf(e.target.value);
      arr.splice(filterValue, 1);
      //when we unselect a day, to make the data disappear we set false to it's show property 
      selArr[e.target.value].show = false;
    }
    this.setState({
      availableDays: arr,
      selectedData: selArr
    });
  };
  saveTime = (e, id, type) => {
    const { availableDays, selectedData } = this.state;
    var newArr = selectedData;
    availableDays &&
      availableDays.map((item, index) => {
        if (index === id) {
          newArr[item] = {
            ...newArr[item],
            show: false,
            [type]: e.target.value
          };
        }
      });
    this.setState({ selectedData: newArr });
  };
  showTime = (e, i) => {
    const { availableDays, selectedData } = this.state;
    var newShowValue = selectedData;
    newShowValue[availableDays[i]].show = true;
    this.setState({ selectedData: newShowValue });
  };
  render() {
    const { availableDays, selectedData } = this.state;
    return (
      <div>
        <div className="available">
          <h3 className="availableDays">Available Days</h3>
          <div className="available-days">
            {this.state.days.map((day, i) => (
              <label key={i} className="days">
                <input
                  type="checkbox"
                  className="checkbox"
                  onClick={e => this.daysChecked(e, i)}
                  value={day}
                />
                {day}
              </label>
            ))}
          </div>
        </div>
        <div className="timeslots">
          <h3>Time Slots</h3>
          {availableDays &&
            availableDays.map((day, i) => (
              <div
                key={day}
              >
                <p className="timeSlots-day">{day}</p>
                <div className="set-time from">
                  <select onChange={e => this.saveTime(e, i, "fromHour")}>
                    {this.state.hour.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                  <select onChange={e => this.saveTime(e, i, "fromMin")}>
                    {this.state.min.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                  <select onChange={e => this.saveTime(e, i, "fromPeriod")}>
                    {this.state.period.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                </div>
                <p>TO</p>
                <div className="set-time to">
                  <select onChange={e => this.saveTime(e, i, "toHour")}>
                    {this.state.hour.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                  <select onChange={e => this.saveTime(e, i, "toMin")}>
                    {this.state.min.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                  <select onChange={e => this.saveTime(e, i, "toPeriod")}>
                    {this.state.period.map((e, i) => (
                      <option key={e}>{e}</option>
                    ))}
                  </select>
                </div>
                <button onClick={e => this.showTime(e, i)}>+</button>
                {selectedData[availableDays[i]] &&
                selectedData[availableDays[i]].show === true ? (
                  <div>
                    From-
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].fromHour}
                    :
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].fromMin}
                    :
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].fromPeriod}
                    <br />
                    To-
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].toHour}
                    :
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].toMin}
                    :
                    {selectedData[availableDays[i]] &&
                      selectedData[availableDays[i]].toPeriod}
                  </div>
                ) : (
                  <></>
                )}
              </div>
            ))}
        </div>
      </div>
    );
  }
}