反應js中的單選按鈕

Question

我遇到的問題是該程序能夠將值從男性更改為女性，但不能反過來。

該程序顯示一個元素列表，該頁面可以選擇刪除這些項目。 在編輯項目時一切正常，但是當我嘗試將性別從女性更改為男性時，它不會更改為並且仍然是女性。

import React, { Component } from "react";

class Users extends Component {
  // call updateUser (App.js)
  handleUpdate = () => {
    this.props.updateUser(
      this.indexNum,
      this.name.value,
      this.age.value,
      this.gender.value,
      this.dept.value,
      this.occu.value,
      this.salary.value,
      this.daysWorked.value,
      this.leaves.value,
      this.message.value
    );
  };

  render() {
    const { allUsers, pressEditBtn, pressDelete } = this.props;

    const usersList = allUsers.map((user, index) => {
      return user.isEditing === true ? (
        <tr key={index}>
          <td>
            <input
              type="text"
              ref={val => {
                this.name = val;
              }}
              required
              defaultValue={user.name}
            />
          </td>
          <td>
            <input
              type="number"
              ref={val => {
                this.age = val;
              }}
              required
              defaultValue={user.age}
            />
          </td>
          <td>
            <input
              name="gender"
              type="radio"
              value="male"
              ref={val => {
                this.gender = val;
              }}
            />
            <label>male</label>
            <input
              name="gender"
              type="radio"
              value="female"
              ref={val => {
                this.gender = val;
              }}
            />
            <label>female</label>
          </td>
          <td>
            <label>Department</label>
            <select
              ref={val => {
                this.dept = val;
              }}
            >
              <option value="HR">HR</option>
              <option value="IT">IT</option>
              <option value="Labour">Labour</option>
              <option value="BOD">BOD</option>
              <option value="Pantry">Pantry</option>
            </select>
          </td>
          <td>
            <input
              type="text"
              ref={val => {
                this.occu = val;
              }}
              required
              defaultValue={user.occu}
            />
          </td>
          <td>
            <input
              type="number"
              ref={val => {
                this.salary = val;
              }}
              required
              defaultValue={user.salary}
            />
          </td>
          <td>
            <input
              type="number"
              ref={val => {
                this.daysWorked = val;
              }}
              required
              defaultValue={user.daysWorked}
            />
          </td>
          <td>
            <input
              type="number"
              ref={val => {
                this.leaves = val;
              }}
              required
              defaultValue={user.leaves}
            />
          </td>
          <td>
            <input
              type="text"
              ref={val => {
                this.message = val;
              }}
              required
              defaultValue={user.message}
            />
          </td>
          <td>
            <input
              type="button"
              value="Update"
              onClick={this.handleUpdate}
              ref={() => {
                this.indexNum = index;
              }}
              className="btn green"
            />
          </td>
        </tr>
      ) : (
        <tr key={index}>
          <td>{user.name}</td>
          <td>{user.age}</td>
          <td>{user.gender}</td>
          <td>{user.dept}</td>
          <td>{user.occu}</td>
          <td>{user.salary}</td>
          <td>{user.daysWorked}</td>
          <td>{user.leaves}</td>
          <td>{user.message}</td>
          <td>
            <button
              className="btn white black-text"
              onClick={() => pressEditBtn(index)}
            >
              Edit
            </button>{" "}
            |{" "}
            <button className="btn red" onClick={() => pressDelete(index)}>
              Delete
            </button>
          </td>
        </tr>
      );
    });

    return (
      <table className="striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Department</th>
            <th>Occupation</th>
            <th>Salary</th>
            <th>Days Worked</th>
            <th>Leaves</th>
            <th>Message</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>{usersList}</tbody>
      </table>
    );
  }
}

export default Users;

Answer 1

你可以取消你的單選按鈕，提到這里的：

通過明確指定選擇哪個單選按鈕，並在 onChange 中取消選擇其他按鈕，或

另一種方法是使用“名稱”HTML 屬性將單選按鈕組合在一起，您已經這樣做了，如果提到的解決方案不起作用，我將嘗試重現該問題