javascript - 反应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;

标签： javascriptreactjsradio-button

Answer 1

您可以取消选择单选按钮，如此处所述：

通过明确指定选择哪个单选按钮，并在 onChange 中取消选择其他单选按钮，或

另一种方法是通过使用“名称”HTML属性将单选按钮组合在一起，您已经完成了，如果上述解决方案不起作用，我将尝试重现该问题