如何在我的 React JS 應用程序中創建交互式復選框？

Question

描述

我對 React JS 很陌生，這可能會顯示在我的代碼中。 我正在嘗試制作一個簡單的待辦事項應用程序，以幫助我了解如何使用 React 進行編碼。 如果選中復選框，則應用程序應僅顯示“完成”，否則應顯示“不完整”。 但是，復選框不會在單擊時更新。

我認為問題在於不理解 React 邏輯，導致 Checkbox() function 被一遍又一遍地調用默認變量（例如：checked == true）。

任何意見，將不勝感激！

代碼和示例

以截圖為例：

文件樹（不包括 node_modules 文件夾）：

.
├── package.json
├── package-lock.json
├── public
│   └── index.html
└── src
    ├── App.js
    ├── Checkbox.js
    ├── index.css
    ├── index.js
    ├── TableBody.js
    ├── TableHeader.js
    └── Table.js

索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

應用程序.js

import { Component } from "react";
import Table from "./Table"

class App extends Component {
  render() {
    const tasks = [
      {
        status: "incomplete",
        task: "Wash Dishes"
      },
      {
        status: "complete",
        task: "Pat Dog"
      },
      {
        status: "incomplete",
        task: "Study"
      }
    ]

    return (
      <div>
        <Table tasks={tasks}/>
      </div>
    )
  }
}

export default App;

表.js：

import TableHeader from "./TableHeader"
import TableBody from "./TableBody"
import { Component } from "react"

class Table extends Component {
    render () {
        const {tasks} = this.props
        return (
            <div className="table container">
                <TableHeader />
                <TableBody tasks={tasks}/>
            </div>

        )
    }
}

export default Table

表體.js

import Checkbox from './Checkbox'

const TableBody = (props) => {
    // takes the properties of the Table object and creates table rows by mapping
    // elements in the array. Returns a table body.

    const rows = props.tasks.map((row, index) => {
        return (
            <tr key={index}>
                <td><Checkbox /></td>
                <td>{row.task}</td>
            </tr>
        )
    })

    return <tbody>{rows}</tbody>
} 

export default TableBody

TableHeader.js

const TableHeader = () => {
    return (
        <thead>
            <tr>
                <th>Status</th>
                <th>Task</th>
            </tr>
        </thead>
    )
}

export default TableHeader

復選框.js

const checkStatus = (checked) => {
    var status = "Something's gone wrong."
    if (checked) {
        var status = "Complete"
    } else if (checked == false) {
        var status = "Incomplete"
    } else {
    }
    return status
}

const Checkbox = () => {
    const input = <input class="form-check-input" type="checkbox" checked></input>
    const status = checkStatus(input.props.checked)
    return (
        <div class="custom-control custom-textbox">
            {input}
            <label>{status}</label>
        </div>
    )
}

export default Checkbox

Answer 1

因此，您需要一些 state 以便您的應用程序可以“記住”復選框應該在什么 state 中。state 將根據是否單擊復選框而改變。 目前，您將選中狀態設置為始終為真（因此它始終顯示為選中狀態）。 嘗試像這樣添加一些 state：

import React, { useState } from 'react';

...

const Checkbox = () => {

  const [isChecked, setIsChecked] = useState(false);
  const Input = (
    <input
      class="form-check-input"
      type="checkbox"
      checked={isChecked}
      onClick={() => setIsChecked(!isChecked) }
    />
    // You can self close tags in React fyi, unlike in HTML.
  ); 

  return (
        <div class="custom-control custom-textbox">
            <Input />
            <label>isChecked is set to: {isChecked}</label>
        </div>
  );
}

發生的情況是，每次單擊復選框時，都會將isChecked state 更改為與當前相反的值。 如果它是假的，它就會變成真的，反之亦然。 然后，您可以將此值輸入應用程序的其他部分，以實際使用復選框的值（例如在服務器提交中）。

我應該提一下——這使用了 React useState 鈎子。 還有許多其他方法可以將 state 管理引入您的應用程序，但這可能是最簡單的一種。 你可以在這里閱讀： https://reactjs.org/docs/hooks-state.html

如何在我的 React JS 應用程序中創建交互式復選框？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-02-25 23:09:11

如何在我的 React JS 應用程序中創建交互式復選框？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-02-25 23:09:11

解決方案1
1 已采納 2021-02-25 23:09:11