У меня проблема в том, что программа может изменять значения с мужского на женское, но не наоборот.
Программа отображает список элементов, и на этой странице есть возможность удалить эти элементы. При редактировании элементов все работает нормально, но когда я пытаюсь изменить пол с женского на мужской, он не меняется и остается женским.
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;