当 startTime 和 endTime 字段为空时，将行的边框设为红色

Question

当用户尝试在特定 id 的时间为空时提交值时，我想显示边框红色的错误。我试过了，但不行document.getElementById("id").style.border = "1px solid red"; 这是我的提交方法

 onSubmission = (e) => {
    e.preventDefault();
    const id = parseInt(e.target.id.split("-")[1]);
    var isError = false;
    debugger;
    const { checkedData } = this.state;
    for (var i = 0; i < checkedData.length; i++) {
      debugger;
      if (checkedData[i].strTime == "" && checkedData[i].endTime == "") {
        debugger;

        
        isError = true;
        document.getElementById("id").style.border = "1px solid red";

        return alert("start time and end time cannot be empty");

        debugger;
        break;
      }
    }

这是实现所有其他过程的完整代码，但现在我被困在这个问题上。请帮忙。

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";


let time = new Date();

time.toLocaleTimeString();
export class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // allChecked: false,
      Days: [
        {
          id: 1,
          day: "Sun",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 2,
          day: "Mon",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 3,
          day: "Tue",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 4,
          day: "Wed",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 5,
          day: "Thu",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 6,
          day: "Fri",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
        {
          id: 7,
          day: "Sat",
          strTime: "",
          endTime: "",
          isChecked: false,
        },
      ],
      checkedData: [],
    };
  }
 
  
  onChangeAllCheckBoxHandler = (e) => {
    debugger;
    let list = this.state.Days;
    debugger;

    if (e.target.checked) {
      list.map((item, index) => {
        debugger;
        item.isChecked = e.target.checked;
        debugger;
      });
      this.setState({
        checkedData: list,
      });
    } else {
      debugger;
      this.state.checkedData &&
        this.state.checkedData.map((item) => {
          debugger;
          item.isChecked = e.target.checked;
          debugger;
        });
      this.setState({
        checkedData: [],
      });

      debugger;
    }

    debugger;
  };

 

  onSubmission = (e) => {
    e.preventDefault();
    const id = parseInt(e.target.id.split("-")[1]);
    var isError = false;
    debugger;
    const { checkedData } = this.state;
    for (var i = 0; i < checkedData.length; i++) {
      debugger;
      if (checkedData[i].strTime == "" && checkedData[i].endTime == "") {
        debugger;

        isError = true;
        document.getElementById.id.style.border = "ipx solid red";
       

        return alert("start time and end time cannot be empty");

        debugger;
        break;
      }
    }
    debugger;
    if (isError == false) {
      debugger;
      alert(JSON.stringify(checkedData));
    }
  };

  onStartTimeChange = (event) => {
    const { Days } = this.state;
    debugger;
    let day_id = parseInt(event.target.id.split("-")[1]);
    debugger;
    Days.map((single_day, index) => {
      debugger;
      if (single_day.id === day_id) {
        debugger;
        Days[index].strTime = event.target.value;
        debugger;
      }
    });

    this.setState({
      Days,
    });
  };

  onChangeHandler = (e) => {
    let arr = this.state.Days;
    debugger;
    let id = parseInt(e.target.id.split("-")[1]);
    // let id = e.target.id;
    if (e.target.checked) {
      let dayIndex = null;
      debugger;
      arr.forEach((item, index) => {
        debugger;
        if (item.id == id) {
          debugger;
          item.isChecked = e.target.checked;
          debugger;
          dayIndex = index;
        }
      });
      console.log(arr);
      let object = arr[dayIndex];
      this.setState({
        checkedData: [...this.state.checkedData, object],
        // Days: arr,
      });
    } else {
      let removedArray =
        this.state.checkedData &&
        this.state.checkedData.filter((item) => item.id != id);

      arr.forEach((item, index) => {
        debugger;
        if (item.id == id) {
          debugger;
          item.isChecked = e.target.checked;
          debugger;
        }
      });

      debugger;
      this.setState({
        checkedData: removedArray,
        Days: arr,
      });
      debugger;
    }
  };

 

  onStartTimeChange = (event) => {
    const { Days } = this.state;
    debugger;
    let day_id = parseInt(event.target.id.split("-")[1]);
    debugger;
    Days.map((single_day, index) => {
      debugger;
      if (single_day.id === day_id) {
        debugger;
        Days[index].strTime = event.target.value;
        debugger;
      }
    });

    this.setState({
      Days,
    });
  };

  onEndTimeChange = (event) => {
    const { Days } = this.state;
    let day_id = parseInt(event.target.id.split("-")[1]);
    Days.map((single_day, index) => {
      if (single_day.id === day_id) {
        Days[index].endTime = event.target.value;
      }
    });
  };
  render_days = () => {
    const { Days } = this.state;

    let days_html = [];
    Days.map((single_day) => {
      days_html.push(
        <tr>
          <td>
            <label>{single_day.id}</label>
            {console.log(this.state.Days.isChecked)};
            <input
              id={single_day.day.toLowerCase() + "-" + single_day.id}
              type="checkbox"
              name="isChecked"
              checked={single_day.isChecked}
              style={{
                marginLeft: "20px",
              }}
              onChange={this.onChangeHandler}
            />
          </td>
          <td>{single_day.day}</td>
          <td>
            <input
              id={"start_time-" + single_day.id}
              type="time"
              name="start_time"
              onChange={(event) => this.onStartTimeChange(event)}
            />
          </td>
          <td>
            <input
              id={"end_time-" + single_day.id}
              type="time"
              name="end_time"
              onChange={(event) => this.onEndTimeChange(event)}
            />
          </td>
        </tr>
      );
    });

    return days_html;
  };

  render_table = () => {
    let working_hours_table_html = <></>;
    working_hours_table_html = (
      <table className="table border shadow">
        <thead className="thead-dark">
          <tr>
            <th>
              <input
                type="checkbox"
                name="checkAll"
                id="mainCheckBox"
                onChange={this.onChangeAllCheckBoxHandler}
              />
            </th>

            <th scope="col">Working Days</th>
            <th scope="col">start Time</th>
            <th scope="col">end Time</th>
          </tr>
        </thead>
        <tbody>
          {this.render_days()}
          <button
            id="onSubmit"
            type="submit"
            className="btn btn-dark btn-lg btn-block"
            style={{ width: "100%" }}
          >
            submit
          </button>
        </tbody>
      </table>
    );

    return working_hours_table_html;
  };

  render() {
    return (
      <div className="container">
        <form onSubmit={this.onSubmission}>{this.render_table()}</form>
      </div>
    );
  }
}

export default Check;

Answer 1

你有：

document.getElementById.id.style.border = "ipx solid red";

应该是：

 document.getElementById(id).style.border = "1px solid red";

假设您定义 id 变量的方式是正确的，这应该可以工作。