React中 数据赋值 改变复用方法

    <script type="text/babel">
      // 创建组件
      class Login extends React.Component {
        // 初始化状态
        state = {
          username: "",
          password: "",
        };
        // 复用  
        saveInfo = (e) => {
          this.setState({ [e.target.name]: e.target.value });
        };

        handleSumbit = (event) => {
          event.preventDefault(); // 阻止表单提交
          const { username, password } = this.state;
          alert(`用户名：${username},   密码是:${password}`);
        };
        render() {
          return (
            // onsubmit 当表单提交时调用的接口
            <form action="#" onSubmit={this.handleSumbit}>
              用户名：{" "}
              {
                // onChange 调用同一个方法 进行复用 
              }
              <input onChange={this.saveInfo} type="text" name="userName" />
              密码：{" "}
              <input onChange={this.saveInfo} type="password" name="passWord" />
              <button>登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>