復選框選中的值未通過

Question

我有一個輸入復選框，即使復選框本身被選中，其值也始終在控制台上記錄為 false。 我是不是忘了做某事，我是不是沒有傳遞一些需要的東西？ 我對 React 和 js 還很陌生。 我很抱歉由於某種原因沒有放入所有代碼 stackOverflow 不會讓我粘貼所有代碼

謝謝您的幫助。

class Orders extends Component {
  componentDidMount() {
    this.props.fetchOrders();
  }

  complete = () => {
    const completed = document.getElementById("complete").checked;
    // console.log("this is complete", completed);
    if (completed.checked === true) {
      // text.style.display = "block";
      console.log("im am checked");
    } else {
      console.log("im am NOT checked");
      //text.style.display = "none";
    }
  };

<input>
                <td>
                  <input
                    type="checkbox"
                    name="complete"
                    id="complete"
                    onChange={() => this.complete()}
                  ></input>
                </td>
            

Answer 1

你應該避免在 React 中使用這樣的選擇器，這忽略了庫的重點。 這可能是您復制代碼時出現的問題，但 html 元素應該與 render() function 一起返回。相反，您應該將事件傳遞給回調 function 並使用 dom 元素傳遞的事件，如下所示：

class Orders extends Component {
  componentDidMount() {
    this.props.fetchOrders();
  }

  complete = (e) => {
    if (e.target.checked) {
      console.log("im am checked");
    } else {
      console.log("im am NOT checked");
    }
  };

Answer 2

檢查目標元素中的checked屬性。 這應該工作。

  const complete = (e) => {
    if (e.target.checked) {
      console.log("im am checked");
    } else {
      console.log("im am NOT checked");
    }
  };
  return (
    <div>
      <input
        type="checkbox"
        name="complete"
        id="complete"
        onChange={(e) => complete(e)}
      />
    </div>
  );