React无提交按钮预约功能 无法获取时间值及触发自动提交问题

实现逻辑 #

• 新增时间状态存储选中的时段值
• 给所有时段按钮绑定点击事件，点击时更新时间状态
• 监听日期状态和时间状态的变化，当两个值都存在时自动触发预约提交

代码修改步骤 #

1. 新增时间状态 #

在现有状态声明位置添加时间状态：

const [selectedTime, setSelectedTime] = useState(null);

2. 新增时段选择处理函数 #

const handleTimeSelect = (timeVal) => {
  setSelectedTime(timeVal);
};

3. 修改预约提交函数的时间取值 #

function booking() {
  // 先判断必填项是否都存在
  if (!dateState || !selectedTime) return;
  const data = {
    date: dateState,
    time: selectedTime, // 替换原来的硬编码值
    doctor: doctorid,
  };
  // 此处补充你原有的提交逻辑
}

4. 绑定按钮点击事件 #

给所有时段按钮添加onClick属性，传递当前按钮的时间值：

<TabPanel>
  <button style={styles.button} onClick={() => handleTimeSelect("9:00am")}>9:00am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("9:30am")}>9:30am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("10:00am")}>10:00am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("10:30am")}>10:30am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("11:00am")}>11:00am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("11:30am")}>11:30am</button>
  <button style={styles.button} onClick={() => handleTimeSelect("12:00pm")}>12:00pm</button>
</TabPanel>
<TabPanel>
  <button style={styles.button} onClick={() => handleTimeSelect("6:30pm")}>6:30pm</button>
  <button style={styles.button} onClick={() => handleTimeSelect("7:00pm")}>7:00pm</button>
  <button style={styles.button} onClick={() => handleTimeSelect("7:30pm")}>7:30pm</button>
  <button style={styles.button} onClick={() => handleTimeSelect("8:00pm")}>8:00pm</button>
</TabPanel>

5. 实现自动提交逻辑 #

用useEffect监听日期和时间的变化，两者都有值时自动触发提交：

useEffect(() => {
  if (dateState && selectedTime) {
    booking();
  }
}, [dateState, selectedTime]);

可选优化 #

如果需要给选中的时段加选中高亮效果，可以在按钮样式上做判断：

<button 
  style={{
    ...styles.button,
    backgroundColor: selectedTime === "9:00am" ? "#1677ff" : "默认背景色"
  }} 
  onClick={() => handleTimeSelect("9:00am")}
>9:00am</button>

内容的提问来源于stack exchange，提问作者vivek kn