React：當用戶從下拉菜單中選擇一個值時，如何更新 object 的 state？

Question

我是編碼新手，我正在嘗試創建一個項目，該項目具有一個組件，如果學生在場、缺席或遲到 class，用戶可以在該組件中使用 select。 我為此使用了 React，並創建了一個帶有下拉菜單的顯示，其中顯示了 Present、Absent 或 Late 的選項。

在用戶從下拉菜單中選擇學生是否在場后，我無法更改學生的出勤值。 理想情況下，我希望提交的結果顯示在另一個選項卡中，其中包含所有學生的列表及其當天的出勤率。 這是我擁有的代碼的一部分：

考勤部分：

class Attendance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            students: StudentsAlphabetical,
            list: [
                {idA: "0", option: "Present"},
                {idA: "1", option: "Absent"},
                {idA: "2", option: "Late"},
            ],
            studentAttendance: {
                id: students.id,
                FirstName: students.firstName,
                LastName: students.lastName,
                Attendance: " ",
            },
        };

        // Destructuring this.state.students
        const { id, lastName, firstName } = this.state.students;
       // Getting the length of the students array
       const studentsLength = this.state.students.length;
       // Destructuring this.state.list
       const { idA, option } = this.state.list;
   };

更改出勤方法：

changeAttendance() {
    this.state.studentAttendance.map(value => (
        <tr key={value.id}>
            <td>{value.firstName}</td>
            <td>{value.lastName}</td>
            <td>{value.Attendance}</td>
        </tr>)
};

渲染方法：

render() {
    return(
        <form onSubmit={this.handleSubmit}>
        <Table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Attendance</th>
                </tr>
            </thead>

            <tbody>
            {/*Use the map array method to go through the students array and create the table row for each student*/}
            {this.state.students.map((student =>
            <tr key={student.id}>
                <td>{student.firstName}</td>
                <td>{student.lastName}</td>
                <td> {/*Creating dropdown button that will show if student is Present, Absent or Late*/}
                    <select>
                        {this.state.list.map(item => (
                            <option key={item.idA} value={item.option}>
                                {item.option}
                            </option>
                        ))}
                    </select>
                </td>
            </tr>))}
            </tbody>
        </Table>
        <Button color="secondary" size="lg" block onClick={this.changeAttendance}> {/*Submit button*/}
            Submit Attendance
        </Button>
        </form>
    );
};

如果學生在場、缺席或遲到，在用戶從下拉菜單中選擇后，我想就如何更改 studentAttendance 數組中的出勤部分提出一些建議。 謝謝！

Answer 1

我認為你的目標是這樣的，試試這種方式：

sandbox link:
https://codesandbox.io/s/fervent-hoover-9w31y?file=/src/App.js

import "./styles.css";
import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: "Absent",
      students: [
        { id: 1, name: "st1", attendance: "-" },
        { id: 2, name: "st1", attendance: "-" },
        { id: 3, name: "st1", attendance: "-" }
      ]
    };
  }
  handleChange = (e, id) => {
    let newStudents = this.state.students.map((item) => {
      if (item.id === id) {
        return { ...item, attendance: e.target.value };
      } else {
        return item;
      }
    });
    this.setState({ students: newStudents });
  };
  render() {
    return (
      <div>
        <table style={{ marginTop: 20 }}>
          <p>List: </p>
          {this.state.students.map((item) => {
            return (
              <tr>
                <td>id: {item.id}</td>
                <td>name: {item.name}</td>
                <td>
                  attendance:{" "}
                  <span>
                    <select
                      value={item.attendance}
                      onChange={(e) => this.handleChange(e, item.id)}
                    >
                      <option value="Present">Present</option>
                      <option value="Absent">Absent</option>
                      <option value="Late">Late</option>
                    </select>
                  </span>
                </td>
              </tr>
            );
          })}
        </table>
      </div>
    );
  }
}

export default App;