为什么当我选择select时，此表单中的所有输入都变为空？

Question

为什么我在选择选项时选择此表单中的所有输入都为空？ 此表格效果很好，只有一个问题。如果我填写输入，然后选择选择，则我所有的输入都会失去价值。如果我先填写，请先选择，然后再输入-一切正常。无法理解它是如何发生的。你能给个小费吗？

为什么我在选择选项时选择此表单中的所有输入都为空？ 此表格效果很好，只有一个问题。如果我填写输入，然后选择选择，则我所有的输入都会失去价值。如果我填写，请先选择，然后再选择-一切正常。无法理解它是如何发生的。你能给个小费吗？

import React, { Component } from "react";
import myPhone from "../service/checkPhone.js";
import { usersParamInput } from "../variable.js";
import makeid from "../service/makeID.js";

class FormForUserChange extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      age: "",
      gender: "",
      phone: "",
      address: "",
      display: "none"
    };
  }

  componentWillMount = () => {
    this.setState({ name: this.props.userToChange.name });
    this.setState({ age: this.props.userToChange.age });
    this.setState({ gender: this.props.userToChange.gender });
    this.setState({ phone: this.props.userToChange.phone });
    this.setState({ address: this.props.userToChange.address });
  };

  _makeListFormData = usersParam => {
    return usersParam.map(each => {
      const idForInputToChange = makeid();
      return (
        <input
          key={idForInputToChange}
          className="form-control"
          type="text"
          defaultValue={this.state[each]}
          ref={input => (this[each] = input)}
        />
      );
    });
  };
 

  _handleChange = event => {
    this.setState({ gender: event.target.value });
  };
  _handleSubmit = event => {
    event.preventDefault();
    if (
      this.name.value &&
      this.address.value &&
      this.phone.value &&
      this.age.value &&
      myPhone(this.phone.value)
    ) {
      const changedUser = {
        name: this.name.value,
        age: this.age.value,
        phone: this.phone.value,
        address: this.address.value,
        id: this.props.userToChange.ident,
        gender: this.state.gender
      };
      this.props.saveChangedUser(changedUser, this.props.userToChange.hash);
    } else {
      this.setState({ display: "block" });
    }
  };

  render() {
    let form;
    let btnText;
    const styles = {
      display: this.state.display
    };
    const inputsInForm = this._makeListFormData(usersParamInput);
    // const selectInForm = this._makeSelectFormData(usersParamSelect);
    if (this.props.openModal) {
      form = (
        <div className="shadow p-3 mb-5 bg-white rounded" id="form">
          <form
            className="form-control-file. form-container"
            onSubmit={this._handleSubmit.bind(this)}
          >
            {inputsInForm}
            <select
              className="form-control"
              defaultValue="male"
              onChange={this._handleChange.bind(this)}
            >
              <option value="male">male</option>
              <option value="femal">femal</option>
            </select>
            <button className="btn btn-primary" type="submit">
              Save changes
            </button>
          </form>
          <span id="form-fill-error" style={styles}>
            please fill out all fields correct
          </span>
        </div>
      );
    } else {
      form = "";
    }
    return (
      <div>
        <button
          className="btn btn-primary"
          id="add-user-btn"
          disabled="disabled"
        >
          {btnText}
        </button>
        {form}
      </div>
    );
  }
}

export default FormForUserChange;